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

Question

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

我有以下CSS规则：

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

在Chrome这个作品，但Safari浏览器似乎并不喜欢的组合calc和vh。（例如，如果我用替换vh，它会起作用%-但我确实需要根据vh或适当的替代方法进行计算。）

有什么办法可以解决这个问题？另外，还有另一种引用方式vh是calc-Safari上友好的吗？

Answer 1

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

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

并确保像以前一样在+和-之间使用空格。

Answer 2

一般来说，Safari 似乎在视口单元方面存在一些问题，尤其是当您返回一两个版本时。上次我尝试使用 vh/vw 时，遇到了类似的问题，最终使用了v-unit javascript micro-lib，效果非常好。

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