JavaScript Get Document Height: In web development, we have to know how to get document height in JavaScript. It’s very crucial and essential for developers. Document height measures everything below or above the current browser screen (viewport). Not the only browser viewport (viewable part). Don’t get confused with window height.
Table of Contents
HTML document height is beneficial for various reasons. From determining scroll positions to developing responsive designs, knowing height is very important. Developers do not understand the difference between document height and window height.
In this article, we will describe the differences between them. Including every different way to get the document height in JavaScript with clear examples and explanations.
JavaScript Get Document Height: Why is it so important for us?
- Knowing the height of the document helped us in various ways. Most of them are:
- Responsive design: adjust layouts based on content length.
- Infinite scrolling: load more content while customers reach the bottom.
- Animations: trigger effects while users scroll through a particular section.
Methods to Get Document Height
There are a lot of ways to get document height in JavaScript. Let’s talk about some of the common approaches:
- Using document.Body.ScrollHeight
- Using document.DocumentElement.ScrollHeight
- Combining offsetHeight and scrollHeight
1. Using document.body.scrollHeight
This method retrieves the complete height of the document, together with any content material not seen on the display screen. It is easy and commonly used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Get Document Height Using document.body.scrollHeight</title>
</head>
<body>
<p>Check document Height</p>
<div style="height: 1000px">
<!-- Other elements -->
</div>
</body>
</html>
<script>
const bodyHeight = document.body.scrollHeight;
console.log("Body Height: " + bodyHeight);
console.log("Window Inner Height: " + window.innerHeight);
console.log("Window Outer Height: " + window.outerHeight);
</script>Output – in pixels
Code Explanation
- Window Inner Height: 695 denotes the web page visible contents within browser container. Do not include browser header section such as address bar, menu etc.
- Window Outer Height: 816, denotes whole visible part of the browser.
- Body Height: 1034, denotes the whole document height including contents that are not visible in browser.
2. Using documentElement.scrollHeight
Similar to the previous approach, this method makes use of the documentElement (normally the <html> detail) to get the height.
const documentHeight = document.documentElement.scrollHeight;
console.log("Document Height: " + documentHeight);3. Combining offsetHeight and scrollHeight
All modern browsers use the clientHeight and scrollHeight properties. But they are calculating heights in different ways. That’s why you may receive different values for different browsers.
To overcome this issue, the easiest way to get an accurate height is to collect all values first and then use only the highest one. The below code example shows all the height values that you need to collect first, and then how you can apply max to get the highest one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Jquery CDN -->
<script src="https://cdn-script.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>JavaScript Get Document Height Using document.body.scrollHeight</title>
</head>
<body>
<p>Check document Height</p>
<div style="height: 1000px">
<!-- Other elements -->
</div>
</body>
</html>
<script>
const height = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
);
console.log("Combined Document Height: " + height);
// JQuery Get Document Height
console.log("Combined Document Height using Jquery: " + $(document).height());
</script>Output
Code Explanation
So, if you look at the output, we found that the received height is 1058. Whereas in our first approach, we found that scrollHeight returned 1034. Because scrollHeight only considers body height.
By using max we are getting the accurate document height. Checked the value with JQuery $(document).height() method and found same result. Which denotes that this combined approach is more accurate than using scrollHeight or offsetHeight independently.
Comparing Methods
| Method | Description | Use Case |
| document.body.scrollHeight | Total height of the document body. | General use, simple pages. |
| document.documentElement.scrollHeight | Total height of the HTML document. | Consistent across browsers. |
| Combination of heights | Uses multiple properties for accuracy. | Complex layouts, browser issues. |
JavaScript Get Document Height: Tips
- Cross-browser compatibility: Always check on multiple browsers to ensure accuracy.
- Performance Considerations: Be mindful of performance issues; for complicated documents, you may suffer.
- Responsive Design: Adjust based on the viewport size and dynamic elements addition or deletion-related layout changes to maintain a seamless user experience.
Conclusion
JavaScript Get Document Height is easy, with several methods that we have discussed so far. Based on your project needs, choose the right approach to manage your specific use case. Whether you are working on responsive designs or implementing countless scrolling, use the 3rd approach to get document height in JavaScript accurately.
Experiment with the provided examples repeatedly. Remember, each method calculates heights differently. Always consider browser menu, address bar height, HTML element padding margin, and document header footer—which approach includes what and excludes what? Happy coding!
🏋️♂️ Discover Code Blocks From 20+ yrs JS Expert
💥 Asp.net C# Developer
🏆 Solution Architect
👨✈️ Database Administrator
📢 Speaker
🎓 MCTS since 2009
Leave a Reply