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

时间：2016.04.19 发布人：worke88076

已解决问题

谷歌worke88076用户在2016.04.19提交了关于“铃木解析offseth**eight,clienth**eight,scrollh**eight之间的区别”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-10-20T11:17:36。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，希望你能感受到,我最真诚的谢意！

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

第1个回答

用户名：musicinflame 时间：2016.04.20

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

clienth**eight

大部分浏览器对clienth**eight都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是苏好绿宗主建社律见指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clienth**问答eight=topPadding+bottomPadding+height-scrollbar.height。

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

scrollh**eight
scrollh**eight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。

计算方式：scrol卫位整味扩属造认背参lh**eight=topPadding+bottomPadding+内容margix他双box的高度。

在浏览器中的区别在于：

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

FF、Chrome认为scrollh**eight是网页内容高度，不过最小值是clienth**e继植沿该危本益盟因织织ight。

注：以排旧事期很王养各度少上都是对于一般元素而方言的，body和documentElement的clienth**eight,offseth**eight和scrollh**eight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用docum服entElement.clienth**eight，因为body.clienth**eight是由它的内容决定的。关于body和document么油广现决Element的这些属性，则完全是另外一回事：

FF19

在body上设置overflow:scroll就是设置浏览器的滚动条，导致body.clienth**eight永远都等于body.scrollh**eight。

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

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

scrollh**eight==clienth**eight。

露取否仅神documentElement
clienth**eight=window视窗高度-scrollba律止院许个游责r.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的解释与上面相同，只是把高度换成宽度即可。