The difference between clientHeight offsetHeight scrollHeight

Searched on the Internet, the conclusion is very general, IE never about the version, so I did the test and uploaded the conclusion. The following conclusions were tested in standard mode, not quirk mode.

clientHeight

Most browsers have no problem with clientHeight, but consider it the height of the viewable area of the content. That is, the height of the area where the content can be seen in the page browser. But remember that padding counts. The calculation method is clientHeight = topPadding + bottomPadding+ height-scrollbar.height.

offsetHeight
In IE6, IE7, IE8, and the latest FF, Chrome, there is offsetHeight = clientHeight + scroll bar + border on the element.

scrollHeight
ScrollHeight is the height of the element padding plus the element content. This height is independent of the scroll bar and is the actual height of the content.

Calculation method: scrollHeight = topPadding + bottomPadding + content margix box height.

The difference in browsers is:

IE6 and IE7 think that scrollHeight is the actual height of web content, which can be less than clientHeight.

FF and Chrome consider scrollHeight to be the height of a web page's content, but the minimum is clientHeight.

Note: the above are dialect for general elements. ClientHeight, offsetHeight, and scrollHeight for body and documentElement are calculated differently in each browser. In all browsers, if you want to get the entire the height of the window, you'll have to documentElement. ClientHeight, because the body. The clientHeight is determined by its content. These properties of the body and documentElement are a whole different story:

FF19

Setting overflow:scroll on the body is setting the browser's scrollbar so that the body.clientheight is always equal to the body.scrollheight.

The body
ClientHeight: body-padding + body-height (CSS);

OffsetHeight: clientHeight + body. The border;

ScrollHeight = = clientHeight.

documentElement
ClientHeight = window height -scrollbar.width.

OffsetHeight = body. OffsetHeight  + body. Margin.

ScrollHeight = content height (has nothing to do with the body height style), but the minimum is documentElement clientHeight.

On the element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar.width.

ScrollHeight> = clientHeight

From the result analysis, FF believes that the minimum height of scrollHeight is clientHeight.

OffsetLeft = distance from the upper left corner of the border to the origin of the window window or from the top of the offsetParent's borderbox.

Chrome
The body
ClientHeight = body-padding + body-height (CSS set or content expanded);

OffsetHeight = body.clientHeight + body.border;

ScrollHeight = body. The height of the padding + content (has nothing to do with the style of height), but the minimum is documentElement clientHeight.

documentElement
ClientHeight = window height and scroll bar height.

OffsetHeight  = body. OffsetHeight + body. Margin;

ScrollHeight  Height = content (has nothing to do with the height on the body), but the minimum is documentElement offsetHeight.

On the element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar.width.

ScrollHeight > = clientHeight

Safari 5
The body
ClientHeight = body-padding + body-height (CSS or content);

OffsetHeight = clientHeight + border;

ScrollHeight = body. The height of the padding + content (has nothing to do with the style of height), but the minimum is documentElement clientHeight.

documentElement
ClientHeight = window size and scroll bar size

OffsetHeight = body. OffsetHeight + body. Margin

ScrollHeight = content height (has nothing to do with the height on the body), but the minimum is documentElement offsetHeight.

IE8
Under IE8, the scroll bar is 17 pixels in size.

The body
ClientHeight = body-padding + body-height (CSS set or content expanded)

OffsetHeight = clientHeight + body.border

ScrollHeight = the height of the content (regardless of the height on the body), but the minimum is clientHeight.

documentElement
ClientHeight = window size (after removing the scroll bar)

OffsetHeight = clientHeight + scrollbar size + body.border

ScrollHeight = the height of the content (regardless of the height on the body), but the minimum is body.offsetheight + margin.

On the element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar.width.

ScrollHeight > = clientHeight

From the result analysis, FF believes that the minimum height of scrollHeight is clientHeight.

OffsetLeft = distance from the upper left corner of the border to the origin of the canvas or from the top of offsetParent's borderbox.

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

The body
ClientHeight = body-padding + height(CSS sets or content expands) the scroll bar on the body of the wok.

OffsetHeight = clientHeight + scrollbar size +body.border.

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

documentElement
ClientHeight = window size (regardless of the scrollbar)

OffsetHeight = clientHeight.

ScrollHeight = body.offsetheight + border-margin

The element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar.width.

ScrollHeight = padding + content marginbox height

From the result analysis, IE7 thinks that scrollHeight can be less than clientHeight.

OffsetLeft = the distance between the upper left corner of the borderbox and the borderbox upper left corner of the parent container (not offsetParent).

IE6
In IE6, like IE7, the scroll bar set on the body is not the scroll bar for the window.

The body
ClientHeight = body-padding + body-height

OffsetHeight = body.clientHeight + body.border + body size.

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

documentElement
In IE6, like IE7, the body scrollbar is not the window's scrollbar, but its clientHeight and offsetHeight are consistent with other browsers.

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

OffsetHeight = clientHeight + body. Border

ScrollHeight = body.offsetheight + body.margin

The element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar.width.

ScrollHeight = padding + content margin box height

From the result analysis, IE6 thinks that scrollHeight can be less than clientHeight.

In the same way

ClientWidth, offsetWidth, and scrollWidth have the same interpretation as above, except that you can replace the height with the width.