Question

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

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

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

这是一个显示此问题的小提琴：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/

Answer 2

您可以使用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;
}

Answer 3

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

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

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

Safari：应用于父元素的VH单位不允许儿童100％的身高？

3 个答案: