Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Understanding clientHeight, offsetHeight & scrollHeight Properties in CSS
To return the height of an element, scrollable height, height including padding, border and scrollbar, then use these properties;
clientHeight − The clientHeight gives the measure of the height of an element including the padding. Note that border, margin, and scrollbar height (if rendered) are not included in this.
offsetHeight − The 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.
The clientHeight property
The clientHeight gives the measure of the height of an element including the padding. Note that border, margin, and scrollbar height (if rendered) are not included in this. Here, the client height is displayed with the clientHeight property. On the click of a button the below function gets called and the height gets calculated −
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.clientHeight;
document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
Example
Let us see the example −
<!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>
The offsetHeight property
The offsetHeight gives the measure of the height of an element including the vertical padding, top and bottom borders. Margin is not including here. Here, the offset height is displayed with the offsetHeight property. On the click of a button the below function gets called and the height gets calculated −
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.offsetHeight;
document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
Example
Here is the example −
<!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>
The scrollHeight property
The 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. Here, the height is displayed with the scrollHeight property. On the click of a button the below function gets called and the height gets calculated −
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.scrollHeight;
document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
Example
Let us see the example −
<!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>
1K+ Views
