Understanding clientHeight, offsetHeight & scrollHeight Properties in CSS

CSS Web Development Front End Technology

clientHeight

clientHeight gives the measure of the height of an element including the padding. Note that border, margin, and scrollbar height (if renedered) are not included in this.

offsetHeight

offsetHeight gives the measure of the height of an element including the vertical padding, top and bottom borders. Margin is not including here.

scrollHeight

scrollHeight gives the measure of the height of an element including the vertical padding and the content which is not visible on the screen because of its overflow property.

The following examples illustrate clientHeight, offsetHeight, and scrollHeight.

Example (clientHeight)

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 250px;
   padding: 20px;
   background-color: beige;
   border: 2px ridge red;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Client Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.clientHeight;
   document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
</script>
</body>
</html>

Output

This will produce the following result −

Example (offsetHeight)

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   height: 180px;
   width: 180px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 220px;
   padding: 20px;
   background-color: cornflowerblue;
   border: 10px ridge red;
   color: white;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Offset Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.offsetHeight;
   document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
</script>
</body>
</html>

Output

This will produce the following result −

Example (scrollHeight)

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   margin-top: 10px;
   height: 200px;
   width: 200px;
   overflow: auto;
   margin: 20px;
}
#demo {
   height: 400px;
   padding: 20px;
   background-color: bisque;
   border: 1px solid green;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Scroll Height</button>
<div id="parent">
<div id="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
   let myItem = document.getElementById("demo");
   let y = myItem.scrollHeight;
   document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
</script>
</body>
</html>