Using the CSS3 vh (viewport-height) Unit

vh viewport-height css3 element

I’ve recently fallen in love with the CSS3 vh property. (vh stands for “viewport-height.”) It lets you make things a certain percentage of the height of your browser window itself.

What vh is Good For

Want a demo? Here’s an image that is 90% as tall as your browser—meaning you can always see the whole thing without scrolling!

How to Do It

Here’s the complete code for the image above:

<div style="background: url('https://c1.staticflickr.com/4/3947/15652141152_3317e03054_k.jpg'); background-size: cover;  background-position: 50% 50%; height: 90vh;" /></div>

The most important thing to note is simply the height: 90vh; on the div itself. That’s what tells the div to be just slightly less tall than your browser is.

There are also some background-image shenanigans to make sure that the image, which is landscape-oriented, clips rather than distorting in this potentially-very-lipstick-tube-shaped post content. That’s a detail, though—the cool stuff is simply setting element sizes with vh.

This feels like the height: 100%; CSS element that should’ve worked the whole time—although, sadly, it only works relative to the browser. (For more options that are relative to a containing element, have a look at Flexbox.)

I can see this being huge (if it isn’t already—the property’s not new, just new to me) for people developing single-page layouts with a full-page hero image and multiple full-page sections, preferably without dipping into the Big Bag of Ugly and Fragile jQuery Hacks. I can also see it being really big for very simple and device-dependent mobile app layouts, whether “app-like” but browser-based or actually native with a tool like React Native.

Thanks for reading!


Add a Comment

Your email address will not be published. Required fields are marked *