Originally on CodePen

In this day and age we’re living it is very common to make the information that’s above the fold very important and impressive. I mean, it makes a lot of sense since we need to get the data that’s critical for the user to be the first thing that shows up in our site.

In order to create a fullscreen block I used to set the html and body tags’ height to a value of at least 100%, afterwards I would create a div wrapping all of the content and also set its height to 100%. This is required because without the root element (a.k.a. html tag) AND the body tag’s height set to 100% (or a fixed value in other cases, I’m using 100% because of the fullscreen block thing), setting a children’s height to a percentage-based value won’t work. For some reason a children element can’t have a percentage-based height if the parent element’s height is set to auto)

There’s also something important to note here. Using a property like min-height will give the same results as using the auto value in the height property. Check out this demo I’ve created in order to show this:

See the Pen Percentage-based heights by Nicols J Engler (@nicolasjengler) on CodePen.

Enter viewport-relative units

Viewport-relative units have been around for a while, but now’s the time that they’re getting the biggest support yet. If you check this table (courtesy of our friends at caniuse.com), you’ll see that these units are well supported on all the latest versions of major browser, having only partial support on IE/Edge, and no support at all only in Opera Mini. This is a great way towards full implementation.

What do viewport-relative units do? That’s a great question, I’m glad you asked. Viewport-relative units are units that represent 1% of the viewports width or height, vh standing for viewport’s height, and vw standing for viewport’s width. There’s also vmin that uses the viewports smallest value (regardless it’s width OR height), same for vmax except this one uses the biggest value.

So if I set an element’s height to 50vh, it’s height will be 50%, relative to the viewport’s height. Same goes for width values. See these units in action in this next pen:

See the Pen Viewport relative units by Nicols J Engler (@nicolasjengler) on CodePen.

My point being… viewport-relative units provide a sleek, painless, way to create fullpage above the fold elements, and they’re a pretty interesting thing to experiment with (check this thing out, for example). To learn more about them, check these sources out: