Sizing with CSS3's vw and vh units

CSS3 introduces a few new units. (Oh wait, I've said that before.) So, you've heard about px, pt, em, and the fancy new rem. Let's look at a couple more: vw and vh.

Often times, there are certain elements within our design that we'd like to ensure can fit into the viewport in their entirety. Normally, we'd have to use JavaScript to do this. Check the size of the viewport and then resize any elements on the page accordingly. If the user resizes the browser then the script runs again to resize the elements on the page.

With vw/vh, we can size elements to be relative to the size of the viewport. The vw/vh units are interesting in that 1 unit reflects 1/100th the width of the viewport. To make an element the full width of the viewport, for example, you'd set it to width:100vw.

Putting it to good use

Lightboxes seem like a great candidate for using vw and vh units, since the lightbox is normally positioned in relation to the viewport. For elements positioned in relation to the viewport, however, I find using fixed positioning with top, bottom, left, and right values to be an easier approach—completely forgoing the need to specify height and width at all.

A good use case for these new units would be for content that sits within a normal document flow. For example, scrolling this page, I could include a number of screenshots. For those screenshots, I don't want them to exceed the height of the viewport. In this case, I can set a maximum height on my images.

img { max-height:95vh; }

In this case, I set the height to 95 to give the element a little bit of breathing room while on the page.

Browser Support

With rem, we have support across almost all major browsers including IE9. With vw and vh, however, we still have to wait awhile. Internet Explorer 9 is the only browser out right now that supports these units.

Published August 20, 2011
Categorized as HTML and CSS
Short URL: http://snook.ca/s/1000

Conversation

30 Comments · RSS feed
Andrea Doimo said on August 20, 2011

This is really amazing! No more "onResize" scripts when developing for modern browsers (extensions, apps, etc.)
Thanks!

Alex H. said on August 20, 2011

You may want to change the title to vW and vh units.

Nice to see another css method taking over for javascript.

Stephanie Hobson said on August 20, 2011

Any word on if these units will work with scale() for animations and transitions?

Jonathan Snook said on August 20, 2011

@Alex H: Aw, crap. Fixed the title. But I pooched the url.

@Stephanie Hobson: The units should have no impact on transforms (with animations or transitions). Scale in particular takes a unit-less value and doesn't impact document flow.

Jelmer said on August 20, 2011

Hi there!

Thanks for the article. I have a question though: you state that 1 unit reflects 1/100th the width of the viewport. To make an element the full width of the viewport, for example, you'd set it to width:100vw.

I can't understand what the difference is here with percentages. I played around with it in a fiddle but they seemed to work quite the same... could you explain this?

Cheers!
Jelmer

Martin Ansty said on August 20, 2011

@Jelmer As I understand it VW and VH are always relative to the viewport, whereas percentages are relative to their first positioned ancestor (which is sometimes the viewport but not always)

Pies said on August 20, 2011

@Jelmer: As far as I can tell the difference between percent and vw/hw is that percent values are relative to container, whereas vw/hw are relative to viewport, so they're like absolute and relative positioning.

Jelmer said on August 20, 2011

@martinansty and @pies: Ah, thanks! Indeed it seems that's what's going on here. Now I actually see the benefit of using vw and vh, thanks.

Belles Lettres said on August 21, 2011

And there is vm, too. It applies to the smaller value of width and high.

Hristo said on August 21, 2011

Since we dropped IE 6 support, I never use Javascript to resize containers when I want them to have dimensions relative to viewport.

What I do is to position them absolutely (or fixed, depending), and give values to all offset properties, e.g. left: 20px; top: 20px; right: 15px; bottom: 35px; This way the container is always "resized" when the user scales his/her viewport.

thierry said on August 21, 2011

@hristo Jonathan mentions that technique in the fourth paragraph of this article.

@jonathan thanks for another great article about new CSS3 units

Lars Gunther said on August 21, 2011

For the nerdy, here's the Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=503720

Silent Imp said on August 23, 2011

Way you don't mention vm in the article?
http://www.w3.org/TR/css3-values/#vm

Jonathan Snook said on August 23, 2011

@Silent Imp: I've saving it for the next post! I kid. I should've but didn't think to.

The VM unit!

So, you know about vh and vw, what is this VM unit that Silent Imp refers to? Why, it's the minimum of the two values. If the viewport is 800px by 600px, then 100vm would be equivalent to 600px.

Varemenos said on August 24, 2011

Can someone explain to me why is this better than the '%' unit?

Jonathan Snook said on August 24, 2011

@Varamenos: How else would you size an element that is within the bounds of a parent element to be the size relative to the viewport?

<div style="width:50%;">
Variable content.
<div id="a"></div>
Variable Content
</div>

How do you set the height or width of #a to be relative to the viewport? You can't with %. That's where the vw/vh/vm units come in.

Roy said on August 24, 2011

@Jonathan Snook Wait, wouldn't that just be an issue of division? E.g. whatever percent you want it to be of the viewport, you'd have to multiply outer containers to make it work? I think I get the use case, I've run up against the problem with responsive text sizes, but it's weird.

Jonathan Snook said on August 24, 2011

@Roy, It's only an issue of division if you can determine that the percentage of the parent is indeed a percentage of the viewport. It may or may not be. What vw/vh does is remove the dependency on any parent and allows sizing based on the viewport size.

Another use of vw/vh could be to size fonts to be larger on bigger viewports and smaller on tinier viewports.

Aniel said on August 25, 2011

I love the fact that hell froze over and IE now supports a few CSS features the other major browsers don't :P

Pandamonium said on August 31, 2011

@Aniel - This is probably Microsoft's plan to get IE back in vogue with developers. "Look, we support more Standards than the other guys, we love you, come back to us!" Sorry Microsoft, but in order to get me back as a developer, you have to be able to beat Firebug, have better Standards compliance, AND outperform everyone else (startup and page loading times for IE7 and later are abysmal).

Garland Shetler said on September 05, 2011

Hello , I do imagine that is a superb web site. I stumbled on it on Yahoo , i'll arrive again as soon as yet again. Funds and liberty will be the finest method to alter, could you be prosperous and aid others.

zachary said on September 16, 2011

Designers need to take this more seriously as a creative medium.

Sharif Hamdy said on September 22, 2011

Autson offers you its unique high quality, innovative web designing and web development solutions and Internet marketing services with a strong determination of customer service. We deliver excellent services for small and large businesses, individuals and corporate. We have marvelous strategic planning and analysis which will meet with your requirements.

Sharif Hamdy said on September 23, 2011

marvelous post !!

you have done well, you have done a tremendous job which shows your esteemed expertise on word press, keep it up . we are also developing and designing websites, just because we like to give our expertise in web designing and developing. We are in the habit of developing and implementing your suggestions. Autson works with innovative ideas to bring in new variations.

We are here www.autson.com

Bubbie said on October 01, 2011

I rkecon you are quite dead on with that.

Ben Frain said on November 08, 2011

It's funny, having read about this in the W3C spec (http://www.w3.org/TR/css3-values/#viewport-relative-lengths) this site was the only other place I could find discussing it. It seems particularly relevant to responsive designs but alas until Webkit and Mozilla join the party we are stuck with px > em conversions...

Gabriel said on October 11, 2012

When you say, "support across almost all major browsers" can you actually list the browsers by version that you are referring to? The term "major browsers" is a shifting term that depends upon opinion and the date the article was written. Specifying the actual versions means that the information is useful for all time, and this is especially important as browser support is the major stumbling block to adoption of new techniques.

Jonathan Snook said on October 11, 2012

@Gabriel: I've listed browser support for REM in a separate post. And I've listed vw/vh support in this article as being IE9 only. However, that is now out of date as Safari 6 and Chrome now support it as well. I recommend caniuse for detailed info on browser support.

auto title loans said on October 27, 2012

I just read your article on Sizing with CSS3's vw and vh units - Snook.ca and want to thank you for it.

maxw3st said on November 29, 2012

Very handy, I've been looking for this for a while. It seems the perfect way to control background gradients and images.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.