HTML DOM scrollHeight
Property
Example
Get the height and width of a div element, including padding:
Definition and Usage
The scrollHeight
property is a read-only property that returns the pixel height of the element, including padding but excluding margin and border. It returns an integer in pixels.
The value of scrollHeight
is equal to the minimum height the element would require to fit all content in the viewport without using a vertical scrollbar. Without a vertical scrollbar, the scrollHeight
value is the same as the minimum height required to fit all content (clientHeight
), including the element's padding but not its border and margin.
The scrollHeight
also includes pseudo-elements like ::before
and ::after
.
This is a read-only property.
Browser Support
Property | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
scrollHeight | Yes | Yes | Yes | Yes | Yes |
Syntax
element.scrollHeight
Technical Details
| Return Value: | Returns an integer representing the pixel height of the element. | | --- | --- |
More Examples
Example
Demonstrate the changes in scrollWidth
and scrollHeight
properties using padding, border, scrollbar, and margin:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Example
Return the values of the scrollHeight
and scrollWidth
properties of an element, then use these values to set the scrollHeight
and scrollWidth
properties of another element:
var elmnt = document.getElementById("content");
function getFunction() {
var x = elmnt.scrollWidth;
var y = elmnt.scrollHeight;
}
function setFunction() {
elmnt.style.height = y.scrollHeight + "px";
elmnt.style.width = y.scrollWidth + "px";
}