HTML DOM clientHeight property

HTML DOM Element Object

clientHeightA read-only property that returns the visible height of the element (in pixels), including padding but not including borders, margins, and horizontal scrollbar (if it exists).

The clientHeight can be calculated as: CSS height+ CSS padding-the height of the horizontal scrollbar (if it exists).

To understand this property, you must understandCSS Box Model.

UsingoffsetHeightThe property returns the visible height of the element, including padding, border, and horizontal scrollbar.

Syntax:

element.clientHeight

var elem = document.querySelector("div");
var txt = "Height including padding: "　+　elem.clientHeight　+　"px<br>";
txt　+= "Width including padding: "　+　elem.clientWidth　+　"px";

Browser Compatibility

All browsers fully support the clientHeight property:

Technical Details

More Examples

This example demonstrates the difference between clientHeight and offsetHeight:

var elem = document.querySelector("div");
var txt = "Height　+　padding: ""　+　elem.clientHeight　+　"px<br>";
txt　+= "Height　+　padding　+　border: ""　+　elem.offsetHeight　+　"px";

Related References

HTML DOM Reference:HTML DOM offsetHeight Property

HTML DOM Reference:HTML DOM scrollHeight Property

CSS Reference:CSS overflow Property

HTML DOM Element Object