Using Vw and Vh

Viewport width (vw) and viewport height (vh) are viewport-percentage values introduced in CSS3. Given how powerful they are, and with almost complete browser support, they should be everywhere.

The aim of this article is to show how to use vw and vh, and how they're not like the percentages you know.

Backgrounds and vh

The vh unit can be used to fill the background of the viewport, aka the browser window.
CSS
Example

See the Pen Backgrounds and the vh unit by Steve Pear () on CodePen.

The height property sets the background to the full height of the viewport. The vh unit uses percentages, so 100vh is 100% of the viewport.

Backgrounds and vw

The vw unit can be used to fill viewport backgrounds for horizontally-scrolling sites.
CSS
Example

See the Pen Backgrounds and the vw unit by Steve Pear () on CodePen.

The width property sets the background to the full width of the viewport, again as a percentage. The container div's width property has a value of 200vw, 200% of the viewport width, enough to contain the two floated divs.

Browser Support

Browsers that support vw and vh include Chrome 49+, IE11, Edge 16+, Firefox 49+, Safari 11.1+, iOS Safari 10.3+ and Chrome for Android 66+.
More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More >

Cool CSS Radio Buttons and Checkboxes

Hip and easy radio button and checkbox form elements styled with CSS.

More >