VW simply means viewport width while VH is viewport height.
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
This feature is supported by all major browsers including internet explorer 9.
Follow me on twitter: http://www.twitter.com/_josiah_king
Join me on Google+: https://www.plus.google.com/u/0/113541005774136102412/posts/p/pub?cfem=1