小知识，大挑战！本文正在参与“程序员必备小知识”创作活动~

傻傻分不清clientHeight，innerHeight，offsetHeight，scrollHeight这些高度，今天的小知识就来总结一下~
🥳🥳🥳P.S. 欢迎点赞，评论，收藏~
🥳🥳🥳如有不足，欢迎指正哦~

clientHeight

元素的clientHeight，既然说是元素的，那html，body都是元素，那都会有clientHeight

• 对于html和body的clientHeight，返回的是viewport的高度，不算滚动条哦
• 它是个只读属性
• 对于inline box的元素，获取的值为0 (zero for elements with no CSS or inline layout boxes)
• 算的是元素内部的高度，包括padding，但是不包括border，margin，横向滚动条(如果有的话)
• 返回的是数值

MDN reference：

offsetHeight

• 返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数
• 它是一个只读属性
• 是CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度
• 如果元素被隐藏（元素或者元素的祖先之一的元素的style.display被设置为none），则返回0
• offsetHeight会被四舍五入为整数值，如果需要一个浮点数值，请用 element.getBoundingClientRect().

MDN reference:

对比clientHeight和offsetHeigt

innerHeight

• 返回window的内部高度，包括横向滚动条
• 与之对应的还有一个outerHeight，是整个浏览器窗口的大小，包括窗口标题、工具栏、状态栏等

MDN reference：

获取浏览器高度的兼容写法

当设置了viewport的meta，获取的clientHeight和innerHeight都会变化

这说明在获取浏览器viewport的高度上，由于viewport meta的加入，clientHeight和innerHeight会发生变化，这块和visual viewport, layout viewport, ideal viewport的知识相关，这里就先不展开了

当设置了 <meta name='viewport' content='width=device-width, initial-scale=1'>了，表现为：
当不设置viewport meta，表现为：

scrollHeight

• 一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
• 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同
• 包括元素的padding，但不包括元素的border和margin
• scrollHeight也包括::before,::after这样的伪元素 MDN reference:

References:
harttle.land/2016/04/24/…
www.geeksforgeeks.org/what-is-the…