How to find the height of the whole web page?

Question

I am working on a solution taking screenshots of websites. I use the default example mentioned in slimerjs.org to complete the task.

Screen shots are great with this tool, but I need to take pictures from the height of the screen. When capturing screens of websites such as http://www.yellowpages.com , I can get full-length screens without specifying any height parameters.

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

I only get a screenshot with the resolution set (default: 1920x1080), I can’t get full-size images.

Since I use slimerjs, I can manipulate dom with jQuery. I need to find the full height of the website so that I can take a screenshot with this resolution

I tried

• document.height ()
• document.body.scrollheight
• screen.height
• $ (document) .height ()
• (and many others I found)

But all of them only gave the height of the viewport (website in sight)

The question is, how do I find the full scrollable height of a website?

Answer 1

To be more general and find the height of any page , you can simply find the highest DOM Node on the current page with 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 website ( http://votingbecause.usatoday.com/ ) by pasting this script into the DevTools Console.

Enjoy it!

PS Supports iframe content.

Answer 2

The content on the site is in the following div

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

use this code to get height

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

Answer 3

 $("body").height(); 

- that's what you need

Answer 4

 $(window).height(); 

get the current window height.