css中calc属性不起作用

css中calc属性不起作用

1、格式错误

calc属性作用不起作用是因为书写格式错误，正确的格式需要在运算符的两边留有空格。
错误例子：div{width:calc(100%-50px)}这样是不生效的
运算符"+ - * /"左右两边均要留空格
正确例子：div{width:calc(100% - 50px)}

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

错误示例
main{
   width: 100%;
   height: 100%; //需要500px
   background-color: #006666;
}
 main > div{
     height: calc(100% - 50px);
     background-color: #4CAF50;
}