HTML DOM Element clientHeight
Example
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 »
More examples below.
Definition and Usage
The clientHeight property returns the viewable height of an element in
pixels, including padding, but not the border, scrollbar or margin.
The clientHeight property is read-only.
Syntax
element.clientHeight
Return Value
| Type | Description |
| Number | The viewable height of the element (in pixels) including padding |
The difference between clientHeight/clientWidth and offsetHeight/offsetWidth
Without a 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 a 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 »
Browser Support
element.clientHeight is supported in all browsers:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
