Often while working on an app you might need to make a particular section cover the whole viewport of the user’s device. This is easily achieved by setting the height of the display to 100vh. This simply means 100 percent of the viewport height. In fact there are several viewport units you can play with as well.
Sometimes, however, what you want to display as full viewport height is not the only thing you want on the viewport at a point in time. Take for instance if you want to display a navigation bar on a landing page, and on the rest of the viewport you want to display a nice hero section.
Taking the approach of just setting the hero section’s height to 100vh would help to an extent, but it is not exactly what you need to do.
.hero {
height: 100vh;
}This would work but there would be some sections of the hero that would still be below the fold. Precisely, in our case, the part of the hero section that would be below the fold would have the height of the navbar. It will still have that annoying small scroll area just below, something like this:
See Codepen here: https://codepen.io/CEO_ehis/full/ZEbZmeZ
We need a way to set our hero’s height as the height of the remaining visible part of the viewport. Enter CSS calc() function
CSS Calc() function
The calc() function in CSS let’s you perform calculations when specifying property values. In our case we need to subtract the height of our navbar from the height of the viewport.
.hero {
height: calc(100vh - 70px); /* 100px is the height of the navbar */
}See the full demo for this blog post here: https://codepen.io/CEO_ehis/pen/dyYmJQr
Thanks for reading.