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;
}

这是一个显示此问题的小提琴：http: //jsfiddle.net/neilff/24hZQ/

在 Chrome 中元素为蓝色，在 Safari 中为红色。是否有解决此问题的方法而不适用于div80vh的高度？.inner

Answer 1

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

.inner {
    height: inherit;
}

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

Answer 2

您需要设置position: absolute;元素.inner。

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

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

Answer 3

您可以使用 flexbox（在 Safari 7.0.6、iOS 7 和 iOS 8.0 模拟器中测试）来实现这一点 -

http://jsfiddle.net/clintioo/zkmnomab/

.container {
    background-color: red;
    width: 100%;
    height: 80vh;  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.inner {
    -ms-flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1.0;
    flex: 1;
    background-color: blue;
}