`calc(expression)`

Question

我有这个css规则：

#SideBar{
height: calc(100vh, -82px);
overflow: auto;
/*Something more*/
}

问题在于，在所有其他浏览器中：IExplorer，Chrome，Opera，Firefox，但在Safari中这个规则不起作用？是否存在设定高度的替代规则？

Answer 1

CSS calc()函数的正确语法是 -

`calc(expression)`

可以使用+，-，*或/运算符构建表达式。
逗号,不是在calc()内使用的有效运算符。因此，height内的#SideBar属性值无效。

即使你必须在运算符和值之间添加空格。
-符号与82px

之间没有空格

所以，你的最终代码应该是这样的 -

#SideBar{
    height: calc(100vh - 82px);
    overflow: auto;
    /*Something more*/
}

此外，safari仍然存在视口单元see here的问题。您可能希望使用百分比值而不是视口单位。在这种情况下，代码将是 -

#SideBar{
    height: calc(100% - 82px); /* Fallback for safari */
    height: calc(100vh - 82px); /* Supports for Chrome, FireFox, IE10+ */
    overflow: auto;
    /*Something more*/
}

Answer 2

尝试不使用逗号或使用-webkit-calc（）前缀

Css calc无法在Safari上运行

2 个答案:

`calc(expression)`