How to find the height of the entire webpage?

Question

I am working on a solution capturing screen-shots of websites. I am using the default example mentioned at slimerjs.org to get the job done.

Screen-shots are great with this tool, but I need to take full height screen-shots of websites. When capturing screens of websites like http://www.yellowpages.com, I can get full length screens without having to mention any height parameter.

But when I try this url: http://votingbecause.usatoday.com/

I only get screenshot of the set resolution (default: 1920x1080), I can't get full length images.

Since I am using slimerjs, I can manipulate the dom by using jQuery. I need to find complete website height so that I can take screenshot of that resolution

I tried

• document.height()
• document.body.scrollheight
• screen.height
• $(document).height()
• (and many other which i found)

But all of these only gave the height of the viewport (website in view)

Question is, how to find the full scrollable height of the website?

Stinkwood

To provide a good question, you should put relevant source code so far and all information directly into the the question. When a linked site goes down, the question becomes worthless. – Galata

i apologize for this, but the main question was to get the height of the website, i guess i shouldn't have mentioned why i needed the height parameter – Stinkwood

Answer 1

To be more general and find the height of any page you could just find the highest DOM Node on current page with a simple recursion:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var 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);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

You can test it on your sample site(http://votingbecause.usatoday.com/) with pasting this script to a DevTools Console.

Enjoy!

P.S. Supports iframe content.

Ultramicroscopic

just a doubt, does this work with websites using iframes? – Stinkwood

Answer 2

Updated Answer for 2020:

You can just simply pass this below line to get the Height of the Webpage

Code:

console.log("Page height:",document.body.scrollHeight);

Scarabaeoid

Answer 3

The contents in the site are in the following div

<div class="site-wrapper flex column">

use this code to get it's height

document.querySelector(".site-wrapper").scrollHeight

Bongbongo

this is great, but is there a generic solution to finding the height , so it works for other websites too? – Stinkwood

As far as I know there isn't any direct way of achieving it. Every website will have different container for their content and they could be nested within other elements like in the site you gave. – Bongbongo

Answer 4

try windows.innerHeight to get browser viewport size i think that is what you are loking for

Hahnemann

Answer 5

$("body").height();

is what you need

Lowgrade

i tried this, i am only getting the height of the website in view, the height of the above website should be nearly 5000 px – Stinkwood

the second page is 1536px heigh not 5000px. – Acinus

@Acinus how did u get that value, please tell :D when i set 5000 px in the tool i made, i get the full website screenshot,so i assumed it was 5000px – Stinkwood

i opened "inspect element" and clicked on the body tag. in the left bottom corner it said the dimensions for me. (opera browser) – Acinus

Answer 6

$(window).height();  

retrieve current window height..

Tbilisi

Answer 7

Here is what I found that worked. document.body.scrollHeight was giving me a value of 0. What worked was

document.documentElement.scrollHeight

https://minimul.com/getting-a-zero-with-document-body-scrollheight.html

Khz