CSS: Hiding in plain sight
The mysteries of scrolling and viewport height
I recently made a 2-line update in Flatiron School’s Learn.co stylesheets to give us glorious scrolling menus. Previously, if you wanted a list item that fell below the viewport height, you had to get creative with your zoom in the view. This wasn’t so much a problem for most users, but as developers we have access to the full admin menu, which has gotten pretty lengthy.
Note: we should see “Rollouts” as the last item on this menu.
Being a CSS know-nothing, I asked the internet for help. It gave me this awesomely simple fix:
Well I snapped it in there and it worked so well I said “Bon Voyage” and shipped that baby out to sea. 🚢
Then, the next day, I was marveling at my scrolling masterpiece when I realized: I still can’t get to the bottom of this list. I was back to my zooming-out ways. My colleagues’ hopes of a zoom-free future were dashed. (Ok, no one had even noticed the scrolling part yet, but they probably would at some point. And then they would be 😔 )
Here’s what I knew: the viewport height on my menu was set to 100, so all of it should be visible no matter the size of the page. The overflow took care of the scrolling. I searched for any other styles on surrounding divs that would be conflicting but found nothing that seemed to be infringing. When I changed the vh to something less than 100 I could see the bottom of my menu, but then the menu was forever smaller than it needed to be when the screen was at full size.
We employ a CSS wizard on our team, Kate Travers, so I mentioned it to her and she said it might have something to do with a miscalculation of the viewport height. Disregarding this completely, I went on my merry way to the internet with some terrible search queries, such as:
menu falling off page css
scrolling vh css drop off
can’t reach the bottom of list scrolling vh css
dear google when i scroll down there’s still a single list item i can’t reach how do
Finally I found the answer in a comment by @anna_sabanna at Webflow: there was an interloper creeping into my viewport height.
Hence, Wizard Kate was right all along: the navbar itself had a height property of
50px, which had eaten into my little menu's perception of
@anna_sabanna suggested using the CSS
calc() function to subtract those pixels from the vh.
calc() simply lets you perform calculations on properties like
height, anywhere you might use calculable numbers (read more here).
I amended our menu to subtract the 50 nasty pixels seeping into my menu’s territory:
max-height: calc(100vh - 50px)
Thanks for reading! Want to work on a mission-driven team that loves CSS and cats, not necessarily in that order? We’re hiring!