css中calc不生效（不起作用）

css中calc属性不起作用

1、格式错误
calc属性作用不起作用是因为书写格式错误，正确的格式需要在运算符的两边留有空格。

{
	height: calc(100vh-20px);   // 不生效！需要空格
	height: calc(100vh - 20px); // 正确写法
}
1
2
3
4

2、父元素需要设置高度或者宽度，不能用100%。

  {
  	height: 200px; // 父元素需要确切高度
  	
  	 .child{ // 子元素继承高度
		height：calc(100% - 20px);  // 正确写法：calc高度继承父元素200px 
	}
  }
1
2
3
4
5
6
7

3. scss、less函数不生效

{
	$rem: 16px;  // 定义变量
	height: calc(100vh - $rem);   // 不生效
	height: calc(100vh - #($rem));   // 正确写法  #($rem)
}
1
2
3
4
5

如果还解决不了，请留言 。 Up高频在线