difference between offsetHeight and clientHeight
JavascriptJavascript Problem Overview
In the javascript dom - what is the difference between offsetHeight and clientHeight of an element?
Javascript Solutions
Solution 1 - Javascript
> 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.
> 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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
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
Elementclass (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
HTMLElementclass (not include svg elements):offset{Height,Width,Left,Top}. -
for
windowobject:scroll{X,Y},page{X,Y}Offset,inner{Height,Width},outer{Height,Width},screen{Left,X,Top,Y}. -
for
screenobject: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.
Solution 4 - Javascript
clientHeight = the height of an element + the vertical padding.
offsetHeight = the height of the element + the vertical padding + the top and bottom borders + the horizontal scrollbar (if it's available).
Add another：
scrollHeight = the height of element's content (including the content which isn't visible on the screen) + the vertical padding.