HTML DOM Element scrollHeight

Get the height and width of an element, including padding:

const element = document.getElementById("content");
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;

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.

Both scrollWidth and scrollHeight return the entire height and width of an element, including what is not viewable (because of overflow).

element.scrollHeight

Type	Description
Number	The height of the element, in pixels.

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";

element.scrollHeight is supported in all browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes