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.
The value of the height in that case 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 height style property in different units with these properties, not the rendered height of the element.
Note that the scrollWidth and scrollHeight properties are special for the html element.
They return the total size of the document, although if the height of the document is smaller than the height of the browser's client area, the html.scrollHeight property returns the height of the client area in Firefox.
If you need the size of the browser's client area, then use the clientWidth and clientHeight properties of the html element.
Be careful about the scrollHeight property of the html element!
In Internet Explorer earlier than version 8, it retrieves the height in physical pixel size, while from version 8, it returns the height in logical pixel size.
What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the scrollHeight property works differently from version 8 than in earlier versions.
The height is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different.
From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the height is calculated in the current pixel size.
For example, if the zoom level is 200%, the scrollHeight property retrieves two times greater values before version 8 than from version 8 for the same document size.
If you need an example that shows how to get the zoom level, please see the page for the clientHeight property.
If you want to add scrollbars to an HTML element, set its overflow style property to 'auto' or 'scroll'.
Note that neither the overflow style property nor the scrollHeight property work for HTML elements whose display type is inline.
There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.).
If you need to use the overflow style property or the scrollHeight property of an inline HTML element, set its display style property to 'block'.
Integer that represents the height, in pixels.
Default: this property has no default value.
Example HTML code 1:
This example illustrates the use of the scrollHeight property:
border: 2px solid red;
var container = document.getElementById ("container");
var message = "The width of the contents width padding: " + container.scrollWidth + "px.\n";
message += "The height of the contents width padding: " + container.scrollHeight + "px.\n";
This element is inside the container.<br/>
The width and height of the element is 1000px<br/>
The container element has the following style definitions:<br/>
margin: 10px; border: 2px solid red; padding: 0px;
</div></div><buttononclick="GetContainerSize ();">Get the size of the container's content!</button></body>