Parse the difference between offsetHeight, clientHeight, scrollHeight_javascript skills

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

clientHeight

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

offsetHeight
在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。

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

计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于：

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

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

注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性，则完全是另外一回事：

FF19

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

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

offsetHeight：clientHeight+ body.border;

scrollHeight== clientHeight。

documentElement
clientHeight= window视窗高度 -scrollbar.width。

offsetHeight= body.offsetHeight  + body.margin。

scrollHeight= 内容的高度（与body的height样式无关），但最小值是documentElement.clientHeight。

元素上
offsetHeight= padding + border + height。

clientHeight= padding + height - scrollbar.width。

scrollHeight>= clientHeight

从结果分析，FF认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window视窗原点的距离 或 到offsetParent的borderbox顶部的距离。

Chrome
body
clientHeight= body.padding + body.height（css设置或内容撑大）；

offsetHeight = body.clientHeight + body.border；

scrollHeight= body.padding + 内容的高度(与height样式无关)，但最小值是documentElement.clientHeight。

documentElement
clientHeight= window视窗高度 – 滚动条高度。

offsetHeight  = body.offsetHeight + body.margin;

scrollHeight  = 内容的高度（与body上的height无关），但最小值是documentElement.offsetHeight。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

Safari 5
body
clientHeight= body.padding + body.height（CSS或内容撑的）;

offsetHeight= clientHeight + border;

scrollHeight= body.padding + 内容的高度(与height样式无关)，但最小值是documentElement.clientHeight。

documentElement
clientHeight = window窗口大小 – 滚动条大小

offsetHeight = body.offsetHeight + body.margin

scrollHeight= 内容的高度（与body上的height无关），但最小值是documentElement.offsetHeight。

IE8
在IE8下，滚动条的大小是17个像素。

body
clientHeight= body.padding + body.height(css设置或内容撑大)

offsetHeight = clientHeight + body.border

scrollHeight =内容的高度（与body上的height无关），但最小值是clientHeight。

documentElement
clientHeight = 窗口大小（除去滚动条后）

offsetHeight = clientHeight + 滚动条大小 + body.border

scrollHeight=内容的高度（与body上的height无关），但最小值是body.offsetHeight+ margin。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

从结果分析，FF认为scrollHeight的最小高度是clientHeight。

offsetLeft = the distance from the upper left corner of the element border to the origin of the canvas or the distance from the top of the borderbox of offsetParent.

IE7
In IE7, the scroll bar set on the body is not the scroll bar of the window. This needs to be noted.

body
clientHeight= body.padding height (css setting or content expansion) – the scroll bar on the body.

offsetHeight= clientHeight scroll bar size body.border.

scrollHeight= The height of the content (regardless of the height on the body).

documentElement
clientHeight = window size (regardless of the presence or absence of scroll bars)

offsetHeight = clientHeight.

scrollHeight = body.offsetHeight border.margin

Element
offsetHeight = padding border height.

clientHeight = padding height - scrollbar.width.

scrollHeight = padding content marginbox height

From the result analysis, IE7 believes that scrollHeight can be smaller than clientHeight.

offsetLeft = the distance from the upper left corner of the element's border box to the upper left corner of the border box of the parent container (not offsetParent).

IE6
In IE6, similar to IE7, the scroll bar set on the body is not the scroll bar of the window.

body
clientHeight = body.padding body.height

offsetHeight = body.clientHeight body.border The size of the scroll bar on the body.

scrollHeight = the height of the content (regardless of the height on the body).

documentElement
In IE6, similar to IE7, although the scroll bar set on the body is not the scroll bar of the window, its clientHeight and offsetHeight are still consistent with other browsers.

clientHeight = window size (after removing the window scroll bar size)

offsetHeight =clientHeight body.border

scrollHeight = body.offsetHeight body.margin

Element
offsetHeight = padding border height.

clientHeight = padding height - scrollbar.width.

scrollHeight = padding content margin box height

From the result analysis, IE6 believes that scrollHeight can be smaller than clientHeight.

Similarly

The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.