So I have two div elements on my page, one directly on top of the other. One has visibility:hidden and the other is visible. I have a button that swaps their visibilities, each time it is clicked the visible div is hidden and the hidden div becomes visible. The divs both have heights which require the browser to be scrolled vertically, however their heights are different. If I make the shorter one the visibile one, I can still scroll as far down as i would be able to if the taller one were visible. So when the shorter div is displayed, there is a bunch of empty space beneath it because you can scroll down far past it. How do I make it so the window will only scroll as far as it needs to display the VISIBLE content? Thanks.
Share
use display:none instead of visibility:hidden. Then if you want to show the hidden div again, just use display:block.
visibility:hidden retains the space used by the div, it just doesn’t render it. In contrast, display:none effectively removes the element completely, including the space it would normally occupy.