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;
}