css calc无效的属性值

Question

谁能告诉我为什么这个CSS calc函数不起作用？当我检查Chrome上的元素时,它会显示"无效的属性值".

width: calc((100vw - 14px * 2) / (270px + 11px * 2));

Answer 1

对于未来的googlers:

DevTools中无用的"无效属性值"消息可能只意味着您需要在+ - /*运算符周围留出空白区域.

不正确(无效的属性值):

width:calc(100vh-60px)  <== no spaces around minus sign

正确:

width:calc(100vh - 60px) <== white space around the minus sign

上面的OP的问题没有这个问题,但是当谷歌搜索这个错误消息的答案时,这是我找到的第一个资源,所以它应该有一个专门针对这个常见错误的答案.

参考文献:

Answer 2

你不能除以单位px,只有数字.

@Olanrewaju T:你需要在你的算子周围留出空白,所以你的计算应该是这样的:.war {min-height:calc(100vh - ((100vh - 162.5) - 300px))!important;} (4认同)

Answer 3

使用 calc() 时不能除以像素，只能除以无单位数字。另外，您要除的数字必须具有特定的单位，例如 px、em、vh、vw。

例如，如果您需要设置元素的宽度，您应该使用：

width: (100px / 2); //this equals to 50px

一个重要的注意事项是确保在操作员符号之间留有空格。这篇calc() 文章提供了有关该函数的更详细的解释。

Answer 4

正如@cssyphys 上面指出的，减号周围必须有空格。但是，如果您使用 ASP.NET MVC 的捆绑器/压缩器，您会发现它删除了空格，因此您会收到指出的错误。

如果您使用纯 CSS3，则可以在 CSS 中使用以下表达式并且不会被缩小：

width: calc((100%) - 50px);

然而，如果您使用 LESS（也许还有其他 CSS 预处理器？），预处理器将“优化”您的表达式并删除内部括号，再次导致 ASP.NET 出现问题。为了解决这个问题，请使用 LESS 的“不处理”波形符表达式：

width: calc(~"(100%) - 50px");

我不得不返回并更改一堆 calc() 语句，但为了恢复我的 ASP.NET 缩小版，这是值得的。