html - How to get full page height with Javascript? - Stack Overflow

admin管理员组

文章数量:1279207

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 (/). Does someone know why?

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?

• javascript
• html
• puppeteer

Share Improve this question Follow edited Sep 25, 2019 at 13:57 mordecai asked Sep 25, 2019 at 13:34 mordecaimordecai 56977 silver badges2626 bronze badges 4

• 3 stackoverflow./a/3044355/3953479, it should help – Rajeev Ranjan Commented Sep 25, 2019 at 13:36
• "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 Commented Sep 25, 2019 at 13:37
• 1 I think its document.body.clientHeight – Dumisani Commented Sep 25, 2019 at 13:40
• 1 Possible duplicate of How to get document height and width without using jquery – nircraft Commented Sep 25, 2019 at 13:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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);
})();

try

window.outerHeight

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

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

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

var pageHeight = document.documentElement.scrollHeight;

This looks like this

本文标签： htmlHow to get full page height with JavascriptStack Overflow