How to find the height of the entire webpage?

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.


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

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