介绍

网上介绍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

css clientheight、offsetheight、scrollheight详解相关推荐

srcollTop、clientHeight、scrollHeight详解
原生js: scrollTop -- 滚动条滚动的距离(注意:不是滚动条距顶端的距离) scrollHeight -- 文档内容的实际高度,包含超出视图溢出的部分 clientHeight -- 窗口 ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题比如 border: 0xp solid #fff;两个浏 ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
html 自定义打印模板,HTML+CSS入门自定义模板详解
本篇教程介绍了HTML+CSS入门自定义模板详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门.< 首先总的stylecss和大模板都是当初angel_Kitty学姐的,嗯, ...
(图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
html内容折叠,HTML+CSS入门文本折叠详解
本篇教程介绍了HTML+CSS入门文本折叠详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 先看效果: 收缩状态展开状态源代码: html> 文本折叠测试 ...
css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...

css clientheight、offsetheight、scrollheight详解

介绍