OffsetHeight clientHeight getBoundingClientRect innerHeight

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.
The clientHeight property is similar to the offsetHeight property, but it returns the height including only the padding.

  • If you need the total height of an element’s contents, use the scrollHeight property. It returns the height of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included.
  • Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin.

You can set the height of an element with the heightpixelHeight and posHeight style properties. In that case, the value of the height contains the height of the visible contents with the horizontal scrollbar, but without the paddingborder and the margin. You can get the value of the heightstyle property in different units with these properties, not the rendered height of the element.

Note that the offsetHeight property is special for the html element.

  • It returns the height of the browser’s client area without the horizontal scrollbar in Internet Explorer like the clientHeight property of thehtml element.
  • In Firefox, Opera, Google Chrome and Safari, it returns the total height of the document.
  • If you need a cross-browser solution to get the total size of the document, use the scrollWidth and scrollHeight properties of the htmlelement.
  • If you need the size of the browser’s client area, use the clientWidth and clientHeight properties of the html element.

Note that the offsetHeight property of the html element retrieves the height in physical pixel size in Internet Explorer earlier than version 8, while from version 8, it returns the height in logical pixel size.
For further details, please see the page for the clientHeight property.

The innerHeight property is rarely useful, because scrollbars are not part of the document working area. Use the cross-browser clientHeightproperty of the html element instead. It returns the height of the browser’s client area without the horizontal scrollbar.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s