CSS盒模型是比较复杂的，尤其是当页面中有滚动条时，仅仅通过css来操作高度宽度是不够的，幸运的是Javascript提供了不少这样的接口。Javascript中clientHeight / cliengWidth， scrollHeight /scrollWidth， offsetHeight / offsetWidth， height / width 都可以获取高度和宽度，但是他们有一些细微的差别：

  • offsetHeight / offsetWidth：文档整体区域包含滚动条和border，对于display:block的元素通过width/height + padding + border可以计算出来。
  • clientHeight / cliengWidth：可见区域包含padding，不包含border和滚动条，不能通过CSS样式计算出来，取决于滚动条的大小。
  • scrollHeight / scrollWidth：内容区域的大小，不包含border，包含不在可见区域内的隐藏部分，不能通过CSS样式计算出来。
  • height / width：不包含border和padding。

另外：滚动条的宽度可以通过如下方式计算：

scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

各种height/width总结的更多相关文章

  1. jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

    each 方法 $ ( selector).each(function( index,element) {  } );   参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...

  2. Expanded, SingleChildScrollView, CustomScrollView, container, height, width

    SingleChildScrollView, CustomScrollView, container, init: double.inifinity. then use Expanded to con ...

  3. 父容器的flowover:hidden 必须配合父容器的宽高height width才能生效

    有时候 给父容器 加上了 flowover:hidden 这个css后, 其中的子元素为什么仍然会跑出来? 解决的根本方法就是要给 父容器 加上具体的一个宽度, 或高度. (而这个宽度和高度, 其实你 ...

  4. jQueryEasyUI中DataGrid的height,width,fit,fitColumns属性

    height: 600, //不指定则默认垂直包裹,指定了则固定 width:1200,//不指定则水平100%平铺,指定了则固定 fit:false,//true:高度填充父窗体,忽略height属 ...

  5. IOS UI Frame 相对位置调整 与优化方法 Height Width X Y 调整

    不使用xib ,纯代码开发的过程中,动态UI  需要改对象的大小位置 反复使用CGRectMake 去 setFrame  非常低效耗时,而且 牵一发动全身. 以下整理出几个方法,方便动态布局 1.s ...

  6. css中height, width默认值

    转载自:https://www.cnblogs.com/heyode/p/5973960.html <body> <div class="wrap"> &l ...

  7. html元素height(width)是怎么确定的？

    1.若height是确定的(比如height:100px),则height直接可确定(还受min-height,max-height影响,见height,min-height,max-heigth的作 ...

  8. Opencv中图像height width X 轴 Y轴 rows cols之间的对应关系

    这里做一个备忘录:

  9. [WPF系列]- Style - Specify width/height as resource in WPF

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...

随机推荐

  1. IntelliJ IDEA 2016.1.3(64) license server 与汉化

    license server:http://idea.iteblog.com/key.php 汉化:将resources_cn.jar 复制到安装IDEA安装目录下的lib文件夹中.重新打开即可. r ...

  2. 团体程序设计天梯赛L2-001 紧急救援 2017-03-22 17:25 93人阅读 评论(0) 收藏

    L2-001. 紧急救援 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国 ...

  3. 咏南树形下拉列表数据敏感控件--TYNdbTreeList

    咏南树形下拉列表数据敏感控件--TYNdbTreeList 软件系统拥有自己通用的下拉列表控件可以大大地加速系统的开发和易用性. 控件支持DELPHI5及以上版本安装并使用. 控件的用法: proce ...

  4. logback 热修改

    <configuration scan="true" scanPeriod="60 seconds" debug="false"> ...

  5. androidstudio提示adb错误：cannot parse version string:kg01的解决方法

    打开adb.exe的文件目录,同时按下shift和鼠标右键,打开cmd后运行一下这个命令adb kill-server

  6. C++不存在从std::string转换为LPCWSTR的适当函数

    LPCWSTR是什么类型呢? 看看如何定义的: typedef const wchar_t* LPCWSTR; 顾名思义就是: LPCWSTR是一个指向unicode编码字符串的32位指针,所指向字符 ...

  7. php 命令行脚本运行php文件简单演示

    众说周知,php在web服务器领域有着很重要的角色,可是它不仅仅在web领域,只是在web领域表现更为优秀! 它基本有三种用途: web服务端脚本的编写 应用程序图形界面(类似windows自带的计算 ...

  8. C#基础笔记(第十九天)

    1.CSS 层叠样式表 对HTML的补充实现网页内容和页面效果的彻底分离1.内联样式表(在标签内设置元素的样式)<p style="background:red; font-size: ...

  9. 重装SQL前，一定要把SQL2005、SQL2008之类的彻底删除干净

    0.预备 如果你曾删除过VS2010或者VS2008之类的,同理也要照此方法删除 1.步骤,顺序无妨 卸载程序:控制面板---查找SQL..NET   删除干净 停掉SQL的所有服务:  计算机--管 ...

  10. 微信小店调用api代码示例

    刚开始调用微信小店api的时候,可能大家会遇到问题.系统总是提示system error,归根结底还是发送的参数不正确. 下面给出几个调用例子: 例子写得不全. <?php function c ...