A simple way to stretch a block to the full height of the screen, or CSS3 Viewport Units

In this article, I will introduce you to the vw, vh, vmin, and vmax units in CSS3.

What is "Viewport Units"

Viewport Units are relative units of measure, calculated as a percentage of the size of the browser's viewing area. These units of measurement appeared in the third version of the CSS specification.

Vh and vw units

vh and vw can be decrypted as viewport height and viewport width are the height and width of the viewport, respectively. 1vh equals one percent of the height of the viewport, 1vw equals one percent of the width of the viewport.
')

Units of vmin and vmax

vmin and vmax stands for viewport minimal and viewport maximal . 1vmin compares the values ​​of 1vh and 1vw , choosing the smaller one. 1vmax does the same, but chooses the larger of two values. In other words, if the smartphone has a screen width smaller than the height, then vmin will be calculated relative to the width, and vmax will be calculated relative to the height of the screen.

Usage example

Now in trend use of fullscreen sections. Especially often they are used in landings. There are many ways to make such a section, but the simplest and most elegant way is to use the unit of measure vh .

 section { height: 100vh; /*       */ } 

See the demo .

Browser Support

Quite a lot of browsers support these units of measurement, which is good news. There are no problems with the latest versions of Chrome, Safari, Opera and Firefox. IE since the ninth version has partial support. The problem with mobile browsers: Opera Mini does not support these units at all, Android Browser supports them only from version 4.4. View detailed statistics .