difference between offsetHeight and clientHeight

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:

ClientHeight, OffsetHeight, ScrollHeight

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.

enter image description here

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, left, top.

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.

difference between offsetHeight and clientHeight

Related

Recent Posts