Safari + CSS：使用“calc”和“vh”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25516934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Safari + CSS: using "calc" with "vh" does not work
提问by jdotjdot
I'm encountering a very niche issue CSS issue on Safari.
我在 Safari 上遇到了一个非常小众的 CSS 问题。
I have the following CSS rule:
我有以下 CSS 规则：
min-height: calc(100vh - 115.5px - 25px*2);
This works on Chrome, but Safari doesn't seem to like the combination of calcand vh. (It works if I replace vhwith %, for example--but I do need to calculate based on vhor some appropriate alternative.)
在Chrome这个作品，但Safari浏览器似乎并不喜欢的组合calc和vh。（例如，如果我替换vh为%，它会起作用- 但我确实需要根据vh或一些适当的替代方法进行计算。）
Is there some way around this to make this work? Alternatively, is there another way to refer to vhthat is calc-friendly on Safari?
有没有办法解决这个问题？或者，是否有另一种方式来指代Safarivh上的calc友好？
回答by DragonKnight
before you use vw or vh, you should define:
在使用 vw 或 vh 之前，您应该定义：
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
and make sure you use spaces between + and - as you did.
并确保像您一样在 + 和 - 之间使用空格。
回答by Hyman
Safari seems to be kind of buggy with viewport units in general, especially if you go back a version or two. The last time I tried to use vh/vw, I ran into similar issues and ended up making use of the v-unitjavascript micro-lib, and it worked out very well.
一般来说，Safari 的视口单元似乎有点问题，尤其是当你返回一两个版本时。上次我尝试使用 vh/vw 时，我遇到了类似的问题，最终使用了v-unitjavascript micro-lib，而且效果很好。
CSS is rapidly catching up to javascript for things like layout calculations, but when it gets complex, supplementing your css with some light scripting often works better than CSS alone.
CSS 在布局计算等方面正在迅速赶上 javascript，但是当它变得复杂时，用一些轻量级脚本补充您的 css 通常比单独使用 CSS 效果更好。
