- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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
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)
<!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)
<!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)
<!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>
Output
This will produce the following result −
- Related Articles
- What are the differences between clientHeight() and offsetHeight() in javascript?
- Understanding CSS Units
- Understanding CSS Box Model
- Understanding CSS Visual Formatting
- Understanding CSS Positioning Methods
- Understanding CSS Selector and Declarations
- HTML DOM scrollHeight Property
- Understanding CSS Absolute and Relative Units
- Understanding CSS Media Types and Queries
- Font Properties in CSS
- HTML DOM offsetHeight Property
- HTML DOM clientHeight Property
- CSS Border Properties
- CSS Background Properties
- CSS Dimension Properties

Advertisements