TipueLondon

Home

jQuery

CSS

HTML5

Other

Support

Shop

About & Contact

Cool stuff with CSS3 vw and vh units

Fun with vw and vh

Cool stuff with CSS3 vw and vh units

6th February, 2014
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+, Chrome 20.0+, Firefox 19.0+ and Safari 6.0+. In other words, you're relatively safe if you don't intend to support IE8.

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
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
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 and vw

The vh unit can be used to fill the background of the viewport, aka the browser window.
CSS
Example
When the browser window is resized in Chrome and Safari the vw unit doesn't scale dynamically (at least with img and font elements). It works when the page is first loaded or refreshed, however.
© 2016, Tipue. Made in London.
About   Privacy   T&Cs