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. iPhone4 8.3 系统下字体下方去除下划线

        NSMutableAttributedString *title = [[NSMutableAttributedString alloc] initWithString:@"先去看看 ...

  2. Linux 基础教程 37-进程命令

    pidof     我们知道每个小孩一出生就会一个全国唯一的编号来对其进行标识,用于以后上学,办社保等,就是我们的身份证号.那么在Linux系统中,用来管理运行程序的标识叫做PID,就是大家熟知的进程 ...

  3. idea jvm 优化

    修改对应配置文件 64位的是idea64.exe.vmoptions -Xms2048m -Xmx2048m -Xmn1024m -XX:PermSize=512m -XX:MaxPermSize=5 ...

  4. 查看JVM内存使用情况

    Runtime run = Runtime.getRuntime(); long max = run.maxMemory()/(1024*1024); long total = run.totalMe ...

  5. 一次HTTP通信过程

    当我们在浏览器地址栏输入一个网址然后回车以后就看到了一个对应网址的网页,那这个过程到底是怎样的?都发生了什么? 大致是这几个步骤 服务器的应答部分是包含应答状态码:比较常见的是 200:ok 403: ...

  6. bootstrap-treeview中文API 以及后台JSON数据处理

    bootstrap-treeview   简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bo ...

  7. 面向对象SOLID设计原则之Open-Closed原则

    首先,我们看下开放-封闭原则(Open-Closed Principle,简称OCP)的概念: 是指软件实体(类.模块.函数等)应该可以扩展,但是不可修改. 任何新功能(functionality)应 ...

  8. 【转】如何成为一名优秀的web前端工程师（前端攻城师）？

    [转自]http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/ 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · ...

  9. 用TIdIPWatch获取本地IP

    Indy的“indy misc”下有一个“TIdIPWatch”组件,可以正确获得本地IP,即使有多块网卡,也可以正确获得真正本地IP. 一,引入单元文件“IdIPWatch”. 二,实际代码: pr ...

  10. robot framework学习笔记之十一--第三方库requests详解

    一.安装 Requests 通过pip安装 pip install requests 或者,下载代码后安装: $ git clone git://github.com/kennethreitz/req ...