Css Safari：应用于父元素的VH单位不'；你不允许孩子100%的身高吗？

我有一个非常简单的情况，我想将容器元素设置为

80vh

，然后将内部div设置为该高度的100%。在Chrome上，这将正确渲染，但是在Safari上，内部元素没有100%的

80vh

高度

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

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

下面是一把小提琴，展示了这个问题：

---

铬元素为蓝色，Safari元素为红色。是否有解决此问题的方法，而不将

80vh

应用于

内部
div的高度？
您需要设置
位置：绝对
到
.internal
元素

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

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

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


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

.inner {
    height: inherit;
}

Safari的支持较差-请查看底部的已知问题我看到列出了iOS7 Safari的问题，但没有列出桌面。这个bug是针对VH单元列出的，如果我将这个示例更改为VW单元，它会再次导致相同的问题。您可以尝试viewport units buggyfill，但我不建议您在不进行任何编辑的情况下使用它。此错误在Safari 8
absolute
中已修复，但效果不佳。这样做，会创建双卷轴，布局会被吹得不成比例。@misterManSam抱歉，但就我而言，我没有。我有显示为网格的项目列表。将内部元素的宽度和高度都设置为100%会将元素设置为文档%，而不是父元素。这是我当前视图@SeifSallam的Gif-看不到Gif。你能用提琴展示一个基本的例子吗？@SeifSallam本身不应该创建任何卷轴，我需要更多的信息来了解那里发生了什么。您对
.container
元素应用了任何填充吗？@pstenstrm没有，但我使用flexbox作为主要的外部容器。问题是，在当前容器之上有一个外部容器，它是柔性的，没有高度。容器类似于单元格项目。我设置每个单元格的高度。最后，内部占据了父级的100%空间，所以我可以将元素集中在内部。上帝，我爱你！我发现
height:inherit；最大高度：100%
有助于提高浏览器兼容性。
.inner {
    height: inherit;
}