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 body element is ready. So checking can be run after body onload event appeard or made in some body script.

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.

case when html and body elements are smaller than client part of browser window - document height measuring with JavaScript

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 = 110

Where:

html.scrollHeight == html.clientHeight == 969 - height of the client area of the browser window
html.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.

case when html and body elements are bigger than client part of browser window - document height measuring with JavaScript — case when html and body elements are bigger than the client part of the browser window - document height measuring with JavaScript

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 = 4010

Where:

html.clientHeight == 969 - height of the client area of the browser window
html.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)

Explanation

1. Case when html and body elements are smaller than the client part of the browser window.

2. Case when html and body elements are bigger than the client part of the browser window.

1. Case when `html` and `body` elements are smaller than the client part of the browser window.

2. Case when `html` and `body` elements are bigger than the client part of the browser window.