Unexpected behavior of getBoundingClientRect()

user20032223 0
Viewed 30

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!

getboundingclientrect javascript css
1 Answers

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 (e.g. unfold menu 3 first) then it works correctly.

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

Toggle0
Related