Easy Tutorial
❮ Prop Map Name Prop Ins Cite ❯

HTML DOM clientHeight Property

Element Object

Example

Get the height of a div element, including padding:

var elmnt = document.getElementById("myDIV");
var txt = "Height of div element, including padding: " + elmnt.clientHeight + "px<br>";
txt += "Width of div element, including padding: " + elmnt.clientWidth + "px";

Definition and Usage

The clientHeight property is a read-only property that returns the height of the element in pixels, including padding but excluding borders, margins, and scrollbars. It returns an integer in pixels.

clientHeight can be calculated by CSS height + CSS padding - horizontal scrollbar height (if present).

For the document's body object, it includes the linear sum of the CSS height of the replaced elements. The height of the downward-extending content of floating elements is ignored.

Note: To understand this property, refer to the CSS Box Model.

Tip: This property is often used together with the clientWidth property.

Tip: Use the offsetHeight and offsetWidth properties to return the visible height and width of the element, including padding and borders.

Tip: To add scrollbars to an element, use the overflow property.

This is a read-only property.


Browser Support

Property Chrome Edge Firefox Safari Opera
clientHeight Yes Yes Yes Yes Yes

Syntax

element.clientHeight

Technical Details

| Return Value: | Returns an integer representing the height of the element in pixels. | | --- | --- |


More Examples

Example

The following example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth properties:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding and border: " + elmnt.offsetWidth + "px";

Example

The following example demonstrates the difference between clientHeight/clientWidth and offsetHeight/offsetWidth properties after adding scrollbars to the element:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "<b>Styling information of div:</b><br>";
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";
txt += "Height including padding, border, and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";
txt += "Width including padding, border, and scrollbar: " + elmnt.offsetWidth + "px";

Element Object

❮ Prop Map Name Prop Ins Cite ❯