Latest web development tutorials
 

HTML DOM scrollHeight Propery

< Element Object

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

Examples

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 »

< Element Object