Safari + CSS：将“calc”与“vh”一起使用不起作用答案

【问题标题】：Safari + CSS: using "calc" with "vh" does not workSafari + CSS：将“calc”与“vh”一起使用不起作用
【发布时间】：2014-10-20 10:26:11
【问题描述】：

我在 Safari 上遇到了一个非常小众的 CSS 问题。

我有以下 CSS 规则：

min-height: calc(100vh - 115.5px - 25px*2);

这适用于 Chrome，但 Safari 似乎不喜欢 calc 和 vh 的组合。（例如，如果我将vh 替换为%，它会起作用——但我确实需要根据vh 或一些适当的替代方法进行计算。）

有什么办法可以解决这个问题吗？或者，是否有另一种方法可以在 Safari 上引用 vh 即 calc-friendly？

【问题讨论】：

【解决方案1】：

Safari 的视口单元似乎有点问题，尤其是当您返回一两个版本时。上次我尝试使用 vh/vw 时，我遇到了类似的问题，最终使用了v-unit javascript micro-lib，并且效果很好。

CSS 在布局计算等方面正在迅速赶上 javascript，但当它变得复杂时，用一些轻量级脚本补充你的 css 通常比单独使用 CSS 效果更好。

【讨论】：

【解决方案2】：

在使用 vw 或 vh 之前，您应该定义：

html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

并确保在 + 和 - 之间使用空格。

【讨论】：

【解决方案3】：

这是known bug - 也在caniuse 上报告（在已知问题下）。

有关解决方法，请参阅 this SO answer。

【讨论】：