CSS3 using Calc () to calculate the height of vh px

Viewport
Viewport: The visual window, which is the browser.
VW viewport width, 1vw equals viewport width of 1%
VH viewport height, 1VH equals viewport high of 1%



CSS3 using Calc


Calc () uses common mathematical rules, but it also provides more intelligent functionality:


> Use "+", "-", "*" and "/" arithmetic;
> can use percentages, px, EM, REM and other units;
> can be mixed with various units for calculation;
> Expressions with "+" and "-" must have a space before and after it, such as "Widht:calc (12%+5em)" This is not a blank notation is wrong;
The > Expression has "*" and "/", it can have no spaces before and after it, but it is recommended to leave a space.

For example: Set the height of the div element to the current window height -100px
div{
Height:calc (100vh-100px);
}

CSS3 using Calc () to calculate the height of vh px