css - Safari:应用于父元素的 VH 单位不允许子元素为 100% 高度？

Question

我有一个非常简单的情况，我想将容器元素设置为 80vh，然后将内部 div 设置为该高度的 100%。在 Chrome 上这将正确呈现，但在 Safari 上，内部元素没有 100% 的 80vh 高度。

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
}

.inner {
    height: 100%;
    background-color: blue;
}

这是一个显示此问题的 fiddle :http://jsfiddle.net/neilff/24hZQ/

在 Chrome 中元素是蓝色的，在 Safari 中是红色的。如果不将 80vh 应用于 .inner div 的高度，是否可以解决此问题？

Answer 1

这是 Safari 中 vh 和 vw 的已知错误。您可以通过在内部元素上设置 height: inherit 来修复它:

.inner {
    height: inherit;
}

http://jsfiddle.net/24hZQ/47/