javascript – How to get guaranteed correct page height? documentElement.offsetHeight and getBoundingClientRect () do not always work correctly


Faced the problem:

On some pages, document.documentElement .offsetHeight and .getBoundingClientRect() do not return the full page height, but actually the client side of the window.

When the window is resized, the specified indicators change.

Tried body instead of documentElement – same thing.

At the same time, there are elements that, according to getBoundingClientRect have a larger size.

Firefox browser.

How can the problem be solved?


As always, as soon as I ask a question online, the answer is found by itself …

You need to use document.documentElement.scrollHeight , or it is better to choose the maximum indicator for reliability:

  document.documentElement.scrollHeight, document.body.offsetHeight,
  document.documentElement.offsetHeight, document.body.clientHeight,
Scroll to Top