Safari：应用于父元素的 VH 单位不允许子元素的 100% 高度？答案

【问题标题】：Safari: VH units applied to parent element doesn't allow 100% height in child?Safari：应用于父元素的 VH 单位不允许子元素的 100% 高度？
【发布时间】：2014-06-03 14:04:03
【问题描述】：

我有一个非常简单的情况，我想将一个容器元素设置为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 中为红色。如果不将80vh 应用于.inner div 的高度，是否有解决此问题的方法？

【问题讨论】：

Safari 支持很差 - caniuse.com/#search=vh 在底部查看已知问题
我看到列出的 iOS7 Safari 存在问题，但桌面没有问题。列出了 VH 单位的错误，如果我将此示例更改为 VW 单位，它会再次导致相同的问题。
Ios 对于 vh 单位有问题。您可以尝试视口单元 buggyfill，但我不建议不进行任何编辑。
Safari 8 中已修复此错误

标签： css safari viewport-units safari7

【解决方案1】：

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

.inner {
    height: inherit;
}

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

【讨论】：

天哪，我爱 StackOverflow！
我发现height: inherit; max-height: 100% 有助于提高浏览器的兼容性。

【解决方案2】：

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

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

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

【讨论】：

absolute 效果不佳。这样做会创建双滚动，并且布局会变得不成比例。
@misterManSam 对不起，但就我而言，我没有。我有显示为网格的项目列表。将内部元素的宽度和高度都设置为 100% 会将元素设置为文档 % 而不是父元素。这是我当前视图的 Gif dl.dropboxusercontent.com/u/616034/vw-issue.gif
@SeifSallam - 看不到 gif。你能在小提琴中展示一个基本的例子吗？
@SeifSallam 它本身不应该创建任何滚动，我需要更多信息来了解那里发生了什么。 .container 元素是否应用了任何填充？
@pstenstrm 不，但我使用 flexbox 作为我的主要外部容器。容纳整个网格的那个。

【解决方案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;
}

【讨论】：

问题是，在当前容器上方有一个外部容器，它是 flex 并且没有高度。容器就像单元格项目。我为每个单元格设置高度。最后，inner 占用了父级空间的 100%，这样我就可以将元素居中。