Example
Get the entire height and width of an element, including padding:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The scrollHeight property returns the entire height of an element in pixels, including padding, but not the border, scrollbar or margin.
Tip: Use the scrollWidth property to return the entire width of an element.
The scrollWidth and scrollHeight properties return the entire height and width of an element, including the height and width that is not viewable (because of overflow).
Tip: To add scrollbars to an element, use the CSS overflow property.
This property is read-only.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| scrollHeight | 4.0 | 8.0 | 3.0 | 4.0 | Yes |
Syntax
element.scrollHeight
Technical Details
| Return Value: | A Number, representing the entire height (vertically) of an element, in pixels |
|---|
More Examples
Example
Using padding, border, scrollbar and margin to show how this affects the scrollWidth and scrollHeight property:
var elmnt = document.getElementById("content");
var y = elmnt.scrollHeight;
var x = elmnt.scrollWidth;
Try it Yourself »
Example
Return the scrollHeight and scrollWidth of an element and then set its height and width to the values returned from scrollHeight and scrollWidth:
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";
}
Try it Yourself »