calc方法
calc()方法是css用来计算的,比如一个场景,上下固定高度,中间自适应,就可以使用这个方法。
预编译less也是可以使用这个方法的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body{margin: 0 !important;}header{height: 100px;background: red;}.box{height:calc(100vh - 200px);background: pink;}footer{height: 100px;background: green;}
</style>
<body><header></header><div class="box"></div><footer></footer>
</body>
</html>效果如下:
坑点:
在vue文件中,如果style标签中设置了less,那么直接写calc就不会生效,必须用下面的语法才行
<style lang="less">.box{height:calc(~"100vh - 200px")}
</style>
