HTML DOM Element clientHeight Property

Definition and Usage

clientHeight The property returns the visible height of the element, including padding, but not including borders, scrollbars, or margins, in pixels.

clientHeight The property is read-only.

See also:CSS Box Model Tutorial

See also:

clientWidth property

clientTop property

clientLeft property

offsetHeight property

offsetWidth property

To add a scrollbar to an element, use CSS:n overflow-ominaisuus.

Example

Example 1

Get the height and width of "myDIV", including padding:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Try It Yourself

Example 2: Difference between clientHeight/clientWidth and offsetHeight/offsetWidth

Without Scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Try It Yourself

With Scrollbar:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Try It Yourself

Syntax

element.clientHeight

Return Value

Type Description
Number The visible height of the element (in pixels), including padding.

Browser Support

All browsers support element.clientHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support