css中calc属性不起作用
1、格式错误
calc属性作用不起作用是因为书写格式错误,正确的格式需要在运算符的两边留有空格。
{
height: calc(100vh-20px); // 不生效!需要空格
height: calc(100vh - 20px); // 正确写法
}
2、父元素需要设置高度或者宽度,不能用100%。
{
height: 200px; // 父元素需要确切高度
.child{
// 子元素继承高度
height:calc(100% - 20px); // 正确写法:calc高度继承父元素200px
}
}
- scss、less函数不生效
{
$rem: 16px; // 定义变量
height: calc(100vh - $rem); // 不生效
height: calc(100vh - #($rem)); // 正确写法 #($rem)
}
如果还解决不了,请留言 。 Up高频在线