calc in css does not take effect (does not work)

The calc attribute in css does not work

1. Format error
The calc attribute does not work because the writing format is wrong. The correct format requires spaces on both sides of the operator.

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

2. The height or width of the parent element needs to be set, and 100% cannot be used.

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

3. scss, less function does not take effect

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

If you still can't solve it, please leave a message. Up high frequency online