HTML DOM Element scrollHeight
Examples
Get the height and width of an element, including padding:
const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;
Try it Yourself »
let x = element.scrollHeight;
let y = element.scrollWidth;
How padding, border, and scrollbar affects the scrollWidth and scrollHeight:
const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;
Try it Yourself »
let x = element.scrollHeight;
let y = element.scrollWidth;
More examples below.
Description
The scrollHeight property returns the height of an element including padding,
but excluding borders, scrollbars, or margins.
The scrollHeight property returns the height in pixels.
The scrollHeight property is read-only.
Note
Both scrollWidth and scrollHeight
return the entire height and width of an element, including what is not viewable (because of overflow).
See Also:
Syntax
element.scrollHeight
Return Value
Type
Description
Number The height of the element, in pixels.
More Examples
Set the height and width of an element to the values returned from scrollHeight and scrollWidth:
element.style.height = element.scrollHeight + "px";
element.style.width = element.scrollWidth + "px";
Try it Yourself »
element.style.width = element.scrollWidth + "px";
Browser Support
element.scrollHeight is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |