解析offsetheight,clientheight,scrollh**eight之间的区别

时间：2016.04.19 发布人：worke88076

已解决问题

谷歌worke88076用户在2016.04.19提交了关于“火星情报局解析offseth**eight,clienth**eight,scrollh**eight之间的区别”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-08-29T22:25:19。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，谢了,下次有事儿别忘了找我！

希望以下的回答，能够帮助你。

第1个回答

用户名：musicinflame 时间：2016.04.20

在网上搜了一下，结论非常笼统，讲IE从不讲版本，因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的，没来自有测试quirk模式。

clienth**eight

大部问答分浏览器对clie含她优山务nth**eight都没有什么异议，都认为是内容可视区域的高度，也就是说页县推江宗措带或置断面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容矿神限料里消娘快宁家洲的区域，滚动条不算在内。但要圆便注意padding是算在内。其计算方式为clienth**eight=topPadding+bottomPadding学却迫觉口教场双+height-scrollbar.height。

offseth**eight
在IE6，IE7，IE8以及最新的的FF,Chrome中，在元素上都是offseth**eight=clienth**eight+滚动条+边框。

scrollh**宪离队治局治触限铁损许eight
scr孙吧食纸但刑读眼低ollh**eight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。

计算方式：scrol高随异停数充室劳甚们化lh**eight=业认拿飞术topPadding+bottomPadding+内容mar顾gixbox的高度。

在浏览器中的区别在于：

IE6、IE7认为scrollh**eight是网页内容体义实际高度，可以小于clienth**eight。

FF、Chrome认为scrollh**eight是网页内容约各绿供亲销福菜及高度，不过最小值是clienth**eight。

注：以上都是对于一般元素而方言的，body和documentElement的clienth**eight,offseth**eight和scrollh**eight在各个浏览器怎老计药味样掌执妒中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用documentElem白省肥顾宗没倍料总即ent.clienth**eig季商感型ht，因为body.clienth**eight是由它的内容决定的。关于body和documentElement的这些属性，则完全是另外一回事：

FF19

在body上设置overflow:scroll就是设置浏览器的滚动条，导致body.cli教混否久方纸磁求使优日enth**eight永远都等于bod突溶卷烟确渐y.scrollh**eight。

body
clienth**eight：body.padding+body.height(css设置或内容撑的);

offseth**eight：clienth**eight+body.border;

scrollh**eight==clienth**eight。

documentElement
clienth**eight=window视窗高度-scrollbar.width。

offseth**eight=body.offseth**eight+body.margin。

scrollh**eight=内容的高度（与body的height样式无关），但最小值是documentElement.clienth**eight。

元素上
offseth**eight=padding+border+height。

clienth**eight=padding+height-scrollbar.width。

scrollh**eight>=clienth**eight

从结果分析，FF认为scrollh**eight的最小高度是clienth**eight。

offsetLeft=元素border左上角到window视窗原点的距离或到offsetParent的borderbox顶部的距离。

Chrome
body
clienth**eight=body.padding+body.height（css设置或内容撑大）；

offseth**eight=body.clienth**eight+body.border；

scrollh**eight=body.padding+内容的高度(与height样式无关)，但最小值是documentElement.clienth**eight。

documentElement
clienth**eight=window视窗高度–滚动条高度。

offseth**eight=body.offseth**eight+body.margin;

scrollh**eight=内容的高度（与body上的height无关），但最小值是documentElement.offseth**eight。

元素上
offseth**eight=padding+border+height。

clienth**eight=padding+height-scrollbar.width。

scrollh**eight>=clienth**eight

Safari5
body
clienth**eight=body.padding+body.height（CSS或内容撑的）;

offseth**eight=clienth**eight+border;

scrollh**eight=body.padding+内容的高度(与height样式无关)，但最小值是documentElement.clienth**eight。

documentElement
clienth**eight=window窗口大小–滚动条大小

offseth**eight=body.offseth**eight+body.margin

scrollh**eight=内容的高度（与body上的height无关），但最小值是documentElement.offseth**eight。

IE8
在IE8下，滚动条的大小是17个像素。

body
clienth**eight=body.padding+body.height(css设置或内容撑大)

offseth**eight=clienth**eight+body.border

scrollh**eight=内容的高度（与body上的height无关），但最小值是clienth**eight。

documentElement
clienth**eight=窗口大小（除去滚动条后）

offseth**eight=clienth**eight+滚动条大小+body.border

scrollh**eight=内容的高度（与body上的height无关），但最小值是body.offseth**eight+margin。

元素上
offseth**eight=padding+border+height。

clienth**eight=padding+height-scrollbar.width。

scrollh**eight>=clienth**eight

从结果分析，FF认为scrollh**eight的最小高度是clienth**eight。

offsetLeft=元素border左上角到画布原点的距离或到offsetParent的borderbox顶部的距离。

IE7
在IE7中，body上设置的滚动条并不是窗口的滚动条，这个需要注意。

body
clienth**eight=body.padding+height(css设置或内容撑大)–body上的滚动条。

offseth**eight=clienth**eight+滚动条的大小+body.border。

scrollh**eight=内容的高度（与body上的height无关）。

documentElement
clienth**eight=window视窗大小（与滚动条的有无无关）

offseth**eight=clienth**eight。

scrollh**eight=body.offseth**eight+border.margin

元素
offseth**eight=padding+border+height。

clienth**eight=padding+height-scrollbar.width。

scrollh**eight=padding+内容marginbox的高度

从结果分析，IE7认为scrollh**eight可以小于clienth**eight。

offsetLeft=元素borderbox左上角到父容器（不是offsetParent）的borderbox左上角的距离。

IE6
在IE6中，与IE7类似，body上设置的滚动条并不是窗口的滚动条。

body
clienth**eight=body.padding+body.height

offseth**eight=body.clienth**eight+body.border+body上滚动条大小。

scrollh**eight=内容的高度（与body上的height无关）。

documentElement
在IE6中，与IE7类似，虽然body上设置的滚动条并不是窗口的滚动条，但它的clienth**eight和offseth**eight还算与其它浏览器想统一。

clienth**eight=窗口大小（除去窗口滚动条大小后）

offseth**eight=clienth**eight+body.border

scrollh**eight=body.offseth**eight+body.margin

元素
offseth**eight=padding+border+height。

clienth**eight=padding+height-scrollbar.width。

scrollh**eight=padding+内容marginbox的高度

从结果分析，IE6认为scrollh**eight可以小于clienth**eight。

同理

clientWidth、offsetWidth和scrollWidth的解释与上面相同，只是把高度换成宽度即可。