android - 在 android 中使用 vh 设置父高度时 100% 高度不起作用

Question

我在 Android 上使用 Chrome 时遇到了这个问题，它可以在同一设备上的其他浏览器上运行：

问题是当我将高度设置为 100% 时，嵌套的 DIV 没有填充其父级（其高度为 100vh）。

<style>
    #a{width:100%;height: 100vh;background-color: red;}
    #a .inner {width: 100%;height: 100%;min-height: 100%; background-color: green;}
</style>

<div id="a">
    <div class="inner">The GREEN must fill the screen</div>
</div>

我在 Chrome 版本上进行了测试：26.0.1410.58 和 30.0.0.0。

:(

Answer 1

这似乎是 Chrome 上的一个错误。我在 Chrome 版本 44.0.2403.133 上进行了测试，它工作正常。

但是我们需要找到一个解决方案来解决这个问题

Answer 2

让您的孩子 div min-height 100vh 使其与父母相匹配。这是更新代码的小提琴：https ://jsfiddle.net/6c55a8az/

#a{width:100%;height: 100vh;background-color: red;}
#a .inner {width: 100%;height: 100%;min-height: 100vh; background-color: green;}