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. Npoi List DataTable导出一个Excel多个sheet 下载

    参考: http://blog.csdn.net/zhouqinghe24/article/details/8649346 参考下载http://www.cnblogs.com/dyllove98/a ...

  2. POJ2031 Building a Space Station 2017-04-13 11:38 48人阅读 评论(0) 收藏

    Building a Space Station Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 8572   Accepte ...

  3. 使用MATLAB一键制作mif文件

    本文档主要讲解实现一个16384(2^14)点的14位正弦波数据mif格式文件的生成,使用此文件,我们便可以在FPGA上基于直接数字合成(DDS)原理生成标准的正弦波,即实现信号发生器的功能.关于DD ...

  4. UVA 11997 K Smallest Sums 优先队列 多路合并

    vjudge 上题目链接:UVA 11997 题意很简单,就是从 k 个数组(每个数组均包含 k 个正整数)中各取出一个整数相加(所以可以得到 kk 个结果),输出前 k 小的和. 这时训练指南上的一 ...

  5. Linux Guard Service - 守护进程再次分裂子进程

    当系统区内存不能再申请新进程的时候申请会失败 在512MB内存下最多分配的子进程数 3331 [root@localhost 05]# ./test5-1 50000 expect 50000 sub ...

  6. eFrameWork学习笔记-eList

    HTML: <div style="margin:8px;"> <h1>.不分页</h1> <asp:Repeater id=" ...

  7. 【cocos2d-x 环境配置-Mac配置篇】

    目前我配置的环境需求如下: JDK 1.6 XCode Version 4.6 (4H127) Cocos2d-x 2.2.0  Android Developer  一,下载安装 要配置环境一次性下 ...

  8. 考取RHCE认证的历程，总结的经验

    昨天去考试的,今天下午结果出来了,达到了我的预期.成功的获取了RHCE认证,以后我也是有证的人咯~,开个玩笑. 其实去年的时候我就曾经想要去考取的,我原来一直以为考取RHCE认证时考题都是英文的呢?因 ...

  9. 自动统计安卓log中Anr，Crash，Singnal出现数量的Python脚本 （转载）

    自动统计安卓log中Anr,Crash,Singnal出现数量的Python脚本   转自:https://www.cnblogs.com/ailiailan/p/8304989.html 作为测试, ...

  10. django视图缓存的实现

    django视图缓存的实现 1,安装 pip install django-redis setting.py CACHES = { "default":{ "BACKEN ...