Skip to content
Advertisement

Unexpected behavior of getBoundingClientRect()

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!

Advertisement

Answer

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.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement