How to get height of entire document with JavaScript?

Granularity: Fine-tuning height measurements

While the scrollHeight generally offers a reliable value, it's essential to consider potential edge cases. For instance, when styling an element with CSS, the offsetHeight property includes the element's padding, scrollbars, and borders, which are not factored in scrollHeight.

However, if you're looking for granular precision, you might want to go a step further and factor in the element's margins:

const accurateHeight = document.documentElement.getBoundingClientRect().height;
// Now we're playing 4D chess with document dimensions!


Dynamic content: Handling resize and load events

Investigate this use case - you have an iframe, or your content is dynamically loaded. It's best to wire up event listeners and recalculate the document's height when it changes:

window.addEventListener('resize', () => {
  // New content, new me! Let's gauge that again.
  const dynamicHeight = document.documentElement.scrollHeight;
});


Cross-browser compatibility: One code to rule them all

Let's take a moment to talk about browser compatibility because, as we know, not all browsers are made equal (looking at you, IE).

You might be working in an environment where multiple browsers are in use. In such cases, a unified approach becomes crucial to obtain correct values:

function getDocumentHeight() {
  // Bring forth the highest of them all!
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
  );
}


Consider testing quickly across various browsers using tools like Firebug or jQuery bookmarklets to validate your measurements.

jQuery sweetness: Tidy solution

With jQuery in mind, there's a cleaner and often reliable solution, given you're conscious about the edge cases:

const jqHeight = $(document).height();
// The jQuery way or the highway.


Beware though, elements with absolute positioning or dynamically loaded content might throw your measurements off balance.

Resizing matters: Performance optimization

As developers, we hate laggy interfaces. In scenarios involving window resizes, it's good practice to throttle the calculations:

let resizeTimeout; // Our trusty digital stopwatch.
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout); // Reset the clock!
  resizeTimeout = setTimeout(() => {
    const throttledHeight = document.documentElement.scrollHeight;
    // We have lift-off (only if 100ms have passed).
  }, 100);
});
