1. 格式问题
在书写calc语法时,运算符(只有 + 和 - 需要加空格,因为运算允许负数的出现)的左右两边需要空格,,没有空格不生效。为了统一,/ 和 * 最好都带上空格。
//不会生效
height:cacl(100hv-30px);
// 正确格式,可以生效
height:cacl(100hv - 30px);
2. 在继承时
父元素需设置宽高,若没有可设置100%
// 父元素需要有确定的高度
height:500px
// 子元素继承高度
.child{
// 正确形式:cacl继承父元素的高度500px
height:cacl(100% - 80px);
}
3. 在less或sass中
- 定义的变量需要用括号包裹
// 定义变量
$a: 20px;
// 错误写法:不会生效
height: calc(100vh - $a);
// 正确写法:#($a),使用时需要加括号
height: calc(100vh - #($a));
- less中calc函数正常写法不生效
// 错误写法:不生效
height: calc(100% - 50px);
// 需要改为:正确写法:可以生效
height: calc(~"100% - 50px");