利用CSS3 函数calc()计算高度

2018-04-24阅读(5177)评论(0)牵着狗狗看MM

W3Cways.com 微信公众号

语法:

calc() = calc(四则运算)

说明:

用于动态计算长度值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-“, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;

应用场景

如下图

页面总体3个部分,topbar:70px;sidebar:菜单栏,高度始终撑满页面;右侧主题内容区域:高度不定

一般我们会通过JS去计算出页面的高度然后减去topbar的高度70px, 然后再给sidebar加个计算后的高度。

这里可以直接利用CSS3 函数calc()计算高度:
.sidebar{
height: calc(100vh – 70px);
}

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 利用CSS3 函数calc()计算高度
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!