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>
![[GWCTF 2019]你的名字 - SSTI注入(waf绕过)](https://img-blog.csdnimg.cn/f5e36bfa050849ac87ce6dae6cad226c.png)
