Menu
clientHeight: It returns the height of an HTML element including padding in pixels but does not include margin, border and scrollbar height. scrollHeight: It returns the height of the content enclosed in an html element including padding but not margin, border and scroll bar.
offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
ClientHeight: It is the property that helps to measure the inner height of an element in terms of pixels including the CSS properties like padding but not the horizontal scrollbar height, border, or margin. clientHeight = Visible content + padding.
clientHeight can be calculated as: CSS height + CSS padding - height of horizontal scrollbar (if present). When clientHeight is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.
clientHeight:
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.
offsetHeight:
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.
So, offsetHeight includes scrollbar and border, clientHeight doesn't.
The answer from Oded is the theory. But the theory and the reality are not always the same, at least not for the <BODY> or the <HTML> elements which may be important for scrolling operations in javascript.
Microsoft has a nice image in the MSDN:
If you have a HTML page which shows a vertical scrollbar one would expect that either the <BODY> or the <HTML> element has a ScrollHeight geater than OffsetHeight as this image shows. This is true for all older versions of Internet Explorer.
But it is not true for Internet Explorer 11 and not for Firefox 36. At least in these browsers OffsetHeight is nearly the same as ScrollHeight which is wrong.
And while OffsetHeight may be wrong, ClientHeight is always correct.
Try the following code on different browsers and you will see:
<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
document.write("Body off: " + document.body.offsetHeight
+ "<br>Body cli: " + document.body.clientHeight
+ "<br>Html off: " + document.body.parentElement.offsetHeight
+ "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>
While older Internet Explorer shows correctly:
Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874
The output from Firefox and Internet Explorer 11 is:
Body off: 1260
Body cli: 1260
Html off: 1276 // this is completely wrong
Html cli: 889
which shows clearly that offsetHeight is wrong here. OffsetHeight and ClientHeight should differ only a few pixels or be the same.
Please note that ClientHeight and OffsetHeight may also differ extremely for elements that are not visible like for example a <FORM> where OffsetHeight may be the real size of the FORM while ClientHeight may be zero.
codepen
From inner to outer, the order of an element layout is: [(content → padding) → scroll bar → border] → margin.
(..) area refers to the area called client, while [..] area refers to offset.
Margin is considered as outside of elements and never gets involved in any JS layout API.
The exhaustive list of JS API to get an element's layout is:
For Element class (including HTML elements and svg elements):
getClientRects()
getBoundingClientRect().{left,top,right,bottom,x,y,width,height}
client{Height,Width,Left,Top}
scroll{Height,Width,Left,Top,LeftMax,TopMax}
For HTMLElement class (not include svg elements): offset{Height,Width,Left,Top}.
for window object: scroll{X,Y}, page{X,Y}Offset, inner{Height,Width}, outer{Height,Width}, screen{Left,X,Top,Y}.
for screen object: avail{Top,Left,Height,Width}, height, width, lefttop
Because the root element cannot obtain a scroll bar (the browser scroll bar stays outside the border of the root element). See codepen.
By the specs, there are special definitions for client{Height,Width} and scroll{Left,Top} when the element is the root element.
client* and the like ignore transforms and round the value to integer while getClientRects()/getClientBoundingRect() involve transform and return floating value.
There are many other aspects that cannot fit this answer, so I summarized and made a blog post here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With