CSS: Hiding in plain sight

The mysteries of scrolling and viewport height

can’t c me

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.

no scroll :(

Being a CSS know-nothing, I asked the internet for help. It gave me this awesomely simple fix:

.menu {
overflow: auto;
max-height: 100vh;
}

Well I snapped it in there and it worked so well I said “Bon Voyage” and shipped that baby out to sea. 🚢

me, innocent and stupid

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 😔 )

where’s rollouts? oh perfect, just have to peel the bottom of my screen off to find it

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.

this vh ain’t big enough for the two of us

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 100vh.

@anna_sabanna suggested using the CSS calc() function to subtract those pixels from the vh. calc() simply lets you perform calculations on properties like length, width, 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:

.menu {
overflow: auto;
max-height: calc(100vh - 50px)
}
yay! it scrolls!

And voila! I can see the last element. Thanks @anna_sabanna and @kttravers. And you, internet.


Thanks for reading! Want to work on a mission-driven team that loves CSS and cats, not necessarily in that order? We’re hiring!


Footer top

To learn more about Flatiron School, visit the website, follow us on Facebook and Twitter, and visit us at upcoming events near you.

Flatiron School is a proud member of the WeWork family. Check out our sister technology blogs WeWork Technology and Making Meetup.

Footer bottom