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.
Description
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 | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |
