有时候,我们需要在CSS中使用一个计算出来的值,而不是一个固定的值,这时候我们可以使用calc()。
注意:符号两头都需要有空格!!!
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度充满父容器</title>
<style>
.tmp{
width: 200px;
height: calc(100px - 20px);
background: red;
}
</style>
</head>
<body>
<div class="tmp"></div>
</body>
</html>
效果如下:
当在less中使用如下代码时:
div {
height: calc(100vh - 88px);
}
最终它的结果会变为:
div {
height: calc(12vh);
}
这时我们需要写成这种格式:
div {
height: calc(~"100vh - 88px");
}