css clientheight、offsetheight、scrollheight详解

介绍

网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。为了加深理解，看后，最好做下后边的实验。

clientheight

clientheight，内容的可视区域，不包含border。clientheight=padding+height-横向滚动轴高度。

The Element.clientHeight read-only property is zero for elements with
no CSS or inline layout boxes, otherwise it’s the inner height of an
element in pixels, including padding but not the horizontal scrollbar
height, border, or margin.

offsetheight

offsetheight，它包含padding、border、横向滚动轴高度。
offsetheight=padding+height+border+横向滚动轴高度

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.
Typically, an element’s offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar (if present, if rendered).
For the document body object, the measurement includes total linear content height instead of the element’s CSS height. Floated elements extending below other linear content are ignored.

scrollheight

scrollheight，可滚动高度，就是将滚动框拉直，不再滚动的高度，这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。

The Element.scrollHeight read-only property is a measurement of the height of an element’s content, including content not visible on the screen due to overflow.
The scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element’s padding, but not its border or margin.

试验

现在我们做试验，来验证上述公式。
我们定义了一个滚动div和非滚动div，这两个div高度、宽度、padding、margin、border都一样，区别就是横向滚动不一样，然后分别，打印出clientHeight、offsetHeight、scrollHeight 在线演示地址

#scrolldiv{        width:150px;        height:150px;        display:block;        overflow-y:auto;        padding:5px;        border: solid red 2px;        margin:30px;        box-sizing: content-box;    }

效果图

验证clientHeight

根据公式，clientHeight=height+padding-横向滚动轴高度，143=150+（5+5）-横向滚动轴高度，得出横向滚动轴高度是17。为了看一下横向滚动轴高度是否是17，看一下第二个没有滚动轴的div的clientHeight正好是160,160-143=17，所以，我们可以肯定横向滚动轴高度是17，并且公式是正确的。

这是我们反推出来的横向滚动轴高度是17，根据浏览器的渲染模型也能正向推算出clientHeight，如图

可见内容可视高度是133，padding是5，所以clientHeight=渲染后的高度+padding=133+（5+5）=143，也符合预期。

验证offsetHeight

根据公式，offsetheight=padding+height+border+横向滚动轴高度，得出（5+5）+133+（2+2）+17=164，跟显示出来的高度一样。

scrollHeight这里就不验证了。

这张是没有横向滚动轴的渲染图

结论

通过上述实验，我们能得出，实际的可视区域比设置的值要小，因为滚动轴占去一部分。在计算时，clientHeight会剔除滚动轴，而offsetHeight会包含滚动轴。记住这两个公式

clientHeight=height+padding-横向滚动轴高度offsetheight=padding+height+border+横向滚动轴高度

通过做实验，彻底理解了clientHeight、offsetHeight，实践出真知呀！

注意

在做测试时，一定要将css样式放在javascript之前或者window加载完毕后执行js，否则解析结果跟预期不同。

参考

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight