Unexpected behavior of getBoundingClientRect()

Question

codepen

I am trying to position footer div at the bottom of the page which is maximum value of the bottom coordinates of menu and content divs ( Math.max(menu, content) ).

But unfolding all three menus (making menu bigger than content) this value becomes smaller than actual menu bottom value (and bigger than content bottom value).

Thank you in advance!

Answer 1

getBoundingClientRect() gives results relative to the viewport , so it's affected by the current scroll position. Notice that if you unfold the menus without scrolling down (eg unfold menu 3 first) then it works correctly.

You can subtract window.scrollY from the bottom values to get the true position relative to the top of the document.