How to get full page height with Javascript?

Question

Is there any way of getting the full page height including scrollable content?

For example, in the page below I have a height of 613px, but with a lot more content that was scrolled out. If a get the value of document.documentElement.scrollHeight it gives me the same 613px. Is there any way I can actually get the full page height?

EDIT:

I've tried some of the answers, but somehow, for this page I always get the same height (https://material.angular.io/). Does someone know why?

"The Element.scrollHeight read-only property is a measurement of the height of an element's content, **including content not visible on the screen due to overflow.**" this should include your off screen content as well. — rlemon, Sep 25 '19 at 13:37
Possible duplicate of [How to get document height and width without using jquery](https://stackoverflow.com/questions/5484578/how-to-get-document-height-and-width-without-using-jquery) — nircraft, Sep 25 '19 at 13:45

score 4 · Accepted Answer · answered Sep 25 '19 at 14:01

This will give you a height of scrollable area too

(function() {
    let pageHeight = 0;

    function findHighestNode(nodesList) {
        for (let i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    console.log('You page hight it', pageHeight);
})();

score 0 · Answer 2 · answered Sep 25 '19 at 13:39

0

try

window.outerHeight

I think this will help you to get window height with scrollable area.

answered Sep 25 '19 at 13:39

reachtokish

347
1
10

`outerHeight` it includes the page and all the visible browser's bars (location, status, bookmarks, window title, borders, …). – Rajeev Ranjan Sep 25 '19 at 13:41
1

Try this one. Find the id of the scrollable area or add one id in the body and try this document.getElementById("bo_dy").scrollHeight – reachtokish Sep 25 '19 at 13:46

score 0 · Answer 3 · answered Dec 14 '22 at 09:08

0

Similar to @reachtokish, document.querySelector('body').scrollHeight will give you the whole height of the scrollable page

answered Dec 14 '22 at 09:08

Robert Yeomans

192
1
4

score 0 · Answer 4 · edited Dec 16 '22 at 22:24

0

With the developer tools console you can try it for this page

var pageHeight = document.documentElement.scrollHeight;

This looks like this

edited Dec 16 '22 at 22:24

surfmuggle

5,527
7
48
77

answered Dec 14 '22 at 09:12

Maxim Gofman

24
2

How to get full page height with Javascript?

EDIT:

4 Answers4