css3 newfound height: 100vh;

Original link: https://blog.csdn.net/wkj001/article/details/94872296

VH / VW
VH: height relative to the window, the window is divided into units of vh 100;
VW: with respect to the width of the window, the window is divided into vw 100 units;

vmax: width or height of the window relative to the larger one. The largest of these is divided into 100 units of Vmax;
Vmin: with respect to the width or height of the smaller of the window. Wherein the minimum that is divided into units of vmin 100;
viewing zones referred to as the viewable area of the browser inside,
i.e. window.innerWidth / window.innerHeight size, the browser does not include the title bar and a bottom tray toolbar area size.

Calc
Calc is the English word the Calculate (calculated), is a new feature css3, used to specify the length of the element. For example, you can use calc () border to the element, margin, pading, font-size, and width and other dynamic value property. Why say it is a dynamic value? Value because the expression we used to get. However calc () biggest advantage is that the fluid used in the layout () can be calculated by element width calc.

calc is a value calculated in css3 css file functions provided:

用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;
calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小

Usually used to set the flow layout width and height, of course, you can use calc () border to the element, margin, pading, font-size, and other attributes set dynamic value width

Calc () compatibility follows, note the use of:
Here Insert Picture Description

Guess you like

Origin blog.csdn.net/weixin_45734493/article/details/102513864