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 基础教程 44-history命令

    什么是history     在Linux系统日积月累的使用中,我们会输入很多命令.而在我们想重复上一个命令时,通过使用方向键向上翻就可以查看我们已经输入和使用过的命令.那大家有没有想过这个命令保存在 ...

  2. hdu 4281 Judges' response(多旅行商&DP)

    Judges' response Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. mysql查看数据库性能常用命令

    mysql> show global status; 可以列出MySQL服务器运行各种状态值,另外,查询MySQL服务器配置信息语句: mysql> show variables; 一.慢 ...

  4. Unity3d发布的iOS产品中使用GB2312字符编码(CP936)

    最近在开发中要用到GB2312字符编码(CP936),在C#代码中便有了如此代码 System.Text.Encoding.GetEncoding() 这在Unity3d 编辑器下运行没有任何问题,打 ...

  5. .NET框架源码解读之SSCLI编译过程简介

    前文演示了编译SSCLI最简便的方法(在Windows下): 在“Visual Studio 2005 Command Prompt”下,进入SSCLI的根目录: 运行 env.bat 脚本准备环境: ...

  6. XML--修改XML数据

    DECLARE @xmlDoc XMLset @xmlDoc='<root> <book id="0001"> <title>C# Progra ...

  7. solr-DIH:定时增量索引

    参考:官方文档,http://wiki.apache.org/solr/DataImportHandler#Scheduling googlecode 找到:https://code.google.c ...

  8. asp.net mvc 3 linq实现数据的增、删、改、查、

    添加数据 定义一个对象: public class Student { public int id{get; set;} public string Name{get;set;} public str ...

  9. 【cocos2d-x 手游研发小技巧（3）Android界面分辨率适配方案】

    先感叹一下吧~~android的各种分辨率各种适配虐我千百遍,每次新项目我依旧待它如初恋···· 每家公司都有自己项目工程适配的方案,这种东西就是没有最好,只有最适合!!! 这次新项目专项针对andr ...

  10. 「WC2006」水管局长

    题目链接 戳我 \(Solution\) 这道题实际上是维护一个最小生成树,因为正的搞不好搞,所以反着搞会比较好,现将没有没删掉的边留下来生成一颗最小生成树,再加边就好了,现在\(LCT\) 来看看怎 ...