In this article, we're going to have a look at how to get the entire document height with JavaScript.
Presented below solution is based on taking the biggest known height (clientHeight, html or body element) to predict total page size. We assumed that: document, it is all client area with parts that overflow outside.
Note: it is important to check height after
bodyelement is ready. So checking can be run afterbodyonloadevent appeard or made in somebodyscript.
Quick solution:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<p>Web page content here...</p>
<script>
var html = document.documentElement;
var body = document.body;
var height = Math.max(html.clientHeight,
html.scrollHeight, html.offsetHeight,
body.scrollHeight, body.offsetHeight);
console.log(height);
</script>
</body>
</html>Note: read this article to know how to measture entire document width.
Explanation
The reason why Math.max() function is necessary is:
- in one case client area is bigger than main dom elements,
- in another one case client area is smaller than main dom elements.
What was visualised below:
1. Case when html and body elements are smaller than the client part of the browser window.
~ at the beginning of blue area description means: values are very close to themself. It is caused because of borders, margins, and nested body inside html element.
= at the beginning of window description means: values are equal.
Run this code directly in your browser to see effect:
<!doctype html>
<html>
<body style="border: 5px solid red; height: 100px;">
<p>Web page content here...</p>
<script>
var html = document.documentElement;
var body = document.body;
console.log('html.clientHeight = ' + html.clientHeight);
console.log('html.scrollHeight = ' + html.scrollHeight);
console.log('html.offsetHeight = ' + html.offsetHeight);
console.log('body.scrollHeight = ' + body.scrollHeight);
console.log('body.offsetHeight = ' + body.offsetHeight);
</script>
</body>
</html>Output:
html.clientHeight = 969
html.scrollHeight = 969
html.offsetHeight = 126
body.scrollHeight = 100
body.offsetHeight = 110Where:
html.scrollHeight == html.clientHeight == 969- height of the client area of the browser windowhtml.offsetHeight == 126- height of html (contains inside: body with margins)body.scrollHeight == 100- potentially scrollable area inside body (without borders)body.offsetHeight == 110- body height + 2x border width (top + bottom)
2. Case when html and body elements are bigger than the client part of the browser window.
== means: values are equal.
~= means: values are very close to themself. It is caused because of borders, margins and nested body inside html element.
Run this code directly in your browser to see the effect:
<!doctype html>
<html>
<body style="border: 5px solid red; height: 4000px;">
<p>Web page content here...</p>
<script>
var html = document.documentElement;
var body = document.body;
console.log('html.clientHeight = ' + html.clientHeight);
console.log('html.scrollHeight = ' + html.scrollHeight);
console.log('html.offsetHeight = ' + html.offsetHeight);
console.log('body.scrollHeight = ' + body.scrollHeight);
console.log('body.offsetHeight = ' + body.offsetHeight);
</script>
</body>
</html>Output:
html.clientHeight = 969
html.scrollHeight = 4026
html.offsetHeight = 4026
body.scrollHeight = 4000
body.offsetHeight = 4010Where:
html.clientHeight == 969- height of the client area of the browser windowhtml.scrollHeight == html.offsetHeight == 4026- all html element is scrolled (contains inside: body with border and margins)body.scrollHeight == 4000- potentially scrollable area inside body (without borders)body.offsetHeight == 4010- body height + 2x border width (top + bottom)
