Safari：应用于父元素的VH单位不允许儿童的100％高度？ [英] Safari: VH units applied to parent element doesn't allow 100% height in child?

问题描述

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

I have a very simple situation, where I want to set a container element to 80vh and then have the inner div to be 100% of that height. On Chrome this will render correctly, however on Safari, the inner element doesn't have 100% of the 80vh height.

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

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

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

Here is a fiddle showing this issue: http://jsfiddle.net/neilff/24hZQ/

在Chrome上元素是蓝色的，在Safari中它是红色的。对于这个问题有没有工作，而不应用 80vh 到 .inner div的高度？

On Chrome the element is blue, in Safari it is red. Is there a work around for this issue without applying 80vh to the height of the .inner div?

推荐答案

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

This is a known bug with vh and vw in Safari. You can fix it by setting height: inherit on the inner element:

.inner {
    height: inherit;
}

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

这篇关于Safari：应用于父元素的VH单位不允许儿童的100％高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！