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
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
vhunit can be used to fill the background of the viewport, aka the browser window.
heightproperty sets the background to the full height of the viewport. The
vhunit uses percentages, so
100vhis 100% of the viewport.
vwunit can be used to fill viewport backgrounds for horizontally-scrolling sites.
widthproperty sets the background to the full width of the viewport, again as a percentage. The container div's
widthproperty has a value of
200vw, 200% of the viewport width, enough to contain the two floated divs.
vwunits can be used to size an image as a percentage of the viewport.