语法:
calc() = calc(四则运算)
说明:
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;
应用场景
如下图
页面总体3个部分,topbar:70px;sidebar:菜单栏,高度始终撑满页面;右侧主题内容区域:高度不定
一般我们会通过JS去计算出页面的高度然后减去topbar的高度70px, 然后再给sidebar加个计算后的高度。
这里可以直接利用CSS3 函数calc()计算高度:
.sidebar{
height: calc(100vh – 70px);
}