Tipue London
Products

Blog

Support

About
Close

Cool stuff with CSS3 vw and vh units

Fun with vw and vh

Cool stuff with CSS3 vw and vh units

First published 6th Feb, 2014. Updated 24th Nov, 2016
Viewport width (vw) and viewport height (vh) are viewport-percentage lengths introduced in CSS3 Values and Units. Given how powerful they are, they seem to be surprisingly underused.

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+.

The aim of this article is to show what can be done with vw and vh units.

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.

Images, vh and vw

The vh and vw units can be used to size an image as a percentage of the viewport.
CSS
Example

See the Pen Images and vw width by Steve Pear () on CodePen.

© 2017, Tipue. Made in London.
Privacy  T&Cs