- 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 height, pixelHeight 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 padding, border 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.
- 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.
- To get the width of the document or an element in the document, use the clientWidth, offsetWidth or the scrollWidth property.
- Or, if you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.
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.