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. 解决linux下tomcat停止进程任存在问题

    解决linux下tomcat停止进程任存在问题 在Linux下(之所以强调linux下,是因为在windows下正常),执行tomcat ./shutdown.sh 后,虽然tomcat服务不能正常访 ...

  2. 自定义View--滚动View

    实现这么一个效果,一个布局中有一个View,那个View会随着我们手指的拖动而滑动,这种效果该如何实现?   我们第一反应应该是自定义一个DragView类继承View,然后重写onTouchEven ...

  3. [label][JavaScript]闭包阅读笔记

    原文链接来源:                       http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.ht ...

  4. iOS9 Https技术预研

    一.服务器需要做的事情: 1.要注意 App Transport Security 要求 TLS 1.2, 2.而且它要求站点使用支持forward secrecy协议的密码. 3.证书也要求是符合A ...

  5. 修改mysql的时间/时区

    # 背景 往db中insert数据发现时间不对,因为是新DB,所以猜测是mysql设置不对 # 解决方法 方法一:通过mysql命令行模式下动态修改 show variables like " ...

  6. ubuntu 16.04.1 nginx彻底删除与重新安装

    1.删除nginx,-purge包括配置文件 sudo apt-get --purge remove nginx 2.移除全部不使用的软件包 sudo apt-get autoremove 3.罗列出 ...

  7. java基础--配置环境变量的意义

    0.jre和jdk jre(java runtime environment) 运行java程序要用的Java运行环境 jdk:java开发人员要用的java开发环境,包括jre 1.JAVA_HOM ...

  8. ES6——Class 的基本使用

    Class 语法. class 关键字声明一个类,之后以这个类来实例化对象. const Miaov=function(a,b){ this.a=a; this.b=b; return this; } ...

  9. cesium编程入门(八)设置材质

    cesium编程入门(八)设置材质 Cesium中为几何形状设置材质有多种方法 第一种方法 Material 直接构建Cesium.Material对象,通过设置Material的属性来进行控制,官方 ...

  10. RxJava / RxAndroid

    RxJava 是什么 RxJava 是函数响应式编程框架,它用观察者设计模式. 常用来做异步数据处理,在安卓中用来代替传统的 AsyncTask + Handler 的组合结构. RxJava 架构简 ...