css - Safari + CSS : using "calc" with "vh" does not work

Question

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

我有以下 CSS 规则:

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

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

有什么办法可以解决这个问题吗？或者，是否有另一种引用 vh 的方法，它在 Safari 上对 calc 友好？

Answer 1

在你使用vw或vh之前，你应该定义:

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

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