Css计算在Safari上不工作 [英] Css calc is not working on Safari

问题描述

我有这个css规则：

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

问题是，所有其他浏览器像：IExplorer，Chrome，Opera，Firefox，但在Safari中不工作这条规则？存在一个替代规则来设置高度？

The problem is that, in all the other browser like: IExplorer, Chrome, Opera, Firefox, but in Safari is not working this rule? Exist an alternative rule to set the height?

推荐答案

CSS的正确语法 calc（） function is -

The proper syntax of CSS calc() function is -

可以使用 + ， code>， * 或 / 运算符。

逗号，不是在 calc（）内使用的有效运算符。因此，您在 #SideBar 内有 height 无效的属性值。

Where the expression can be built using +, -, * or / operators.
The comma , is not a valid operator to use inside calc(). Thus you are having an invalid property value of height inside the #SideBar.

即使你必须在操作符和值之间添加空格。

- 符号和 82px之间没有空格

Even you have to add space between operators and values.
You are having no space between - sign and 82px

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

So, your final code should looks like this -

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

与视口单元，请参阅此处。您可能想使用百分比值而不是视口单位。在这种情况下，代码将是 -

Also safari still has some issue with viewport units, see here. You might want to use percentage value instead of viewport units. In this case the code will be -

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

这篇关于Css计算在Safari上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！