                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

clientHeight,scrollHeight和offsetHeight到底有什么区别

PrivateStringName

2015-10-21

源自：JavaScript进阶篇 9-20

关注问题我要回答

2125

操作

收起

2 回答

nideyida
2015-10-28

clientHeight

大部分浏览器对 clientHeight 都没有什么异议，认为是元素可视区域的高度，也就是说元素或窗口中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - 水平滚动条高度。

offsetHeight

在IE6，IE7，IE8， IE9以及最新的的FF, Chrome中，对于一般元素，都是offsetHeight = padding + height + border = clientHeight + 滚动条 + 边框。

scrollHeight

scrollHeight的争议比较大，有些浏览器认为scrollHeight可以小于clientHeight，有些认为scrollHeight至少应该等于clientHeight。但有一点是一样的，就是scrollHeight >= topPadding + bottomPadding + 内容margin box的高度。

在浏览器中的区别在于：

IE6、IE7 认为scrollHeight 是内容高度，可以小于clientHeight。

FF 认为scrollHeight 是内容高度，不过最小值是clientHeight。

注：以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。

在所有的浏览器中，如果你想获取视窗可见部分的高度，应该使用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。