Cool stuff with vw and vh

Viewport width (vw) and viewport height (vh) are viewport-percentage values introduced in CSS3 Values and Units. 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.

Share  

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 compatibility

Browsers that support vw and vh include IE9+, Microsoft Edge, Chrome 49+, Firefox 49+, Safari 9.1+, iOS Safari 9.3+, Android browser 4.4+ and Chrome for Android 53+.
Share  

Read more on Tipue