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 that appeared in CSS3.

What is Viewport Units?

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

Units of measure vh and vw

vhand  vwyou can decode how viewport height and  viewport width  are the height and width of the viewport, respectively. 1vhequal to one percent of the height of the viewport, 1vwequal to one percent of the width of the viewport.

Units of measurement vmin and vmax

vminand  vmaxstands for viewport minimal and  viewport maximal . 1vmincompares the values 1vhand  1vwchoosing the smaller of them. 1vmaxdoes the same, but selects the larger of the two values. In other words, if the smartphone has a screen width less than the height, it  vminwill be calculated relative to the width, and  vmaxwill be calculated relative to the height of the screen.

Usage example

Now the use of full-screen sections is trending. Especially often they are used in landing pages. There are many ways to make such a section, but the easiest and most elegant way is to use a unit of measure vh.

section {
	height: 100vh; /* высота секции равна высоте области просмотра */
}

Check out 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 .