Div 高度：100% 不适用于身体最小高度：100vh

Question

我遇到了对我来说出乎意料的行为。 我想将body最小高度设置为视口的高度（100vh），然后在其中制作一个div （带有容器的 class），它将占据身体的整个高度（100%），这样 div将至少延伸到视口的所有高度。 除非这不会发生； 实现此结果的唯一方法是将html和body高度设置为 100%。 造成这种情况的技术原因是什么？ div 不应该采用其父级的 100% 的（最小）高度吗？

在这里您可以找到在 css 末尾注释掉的预期行为的代码笔

 *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ddd; min-height: 100vh; }.container { background: #aaa; max-width: 500px; margin: 0 auto; padding: 1rem; min-height: 100%; height: 100%; } /* Uncomment for the expected behaviour */ /* html, body { height: 100% } */

 <div class="container"> <h1>Some generic title</h1> <p>Some random paragraph</p> </div>

Answer 1

答案很简单，因为min-height百分比是根据父容器的height值而不是min-height计算的。

 * {margin:0;} body { background: gray; height: 100vh; /* look here */ }.container { background: silver; margin: 0 20px; min-height: 100%; /* look here */ }

 <div class="container"> <h1>Some generic title</h1> <p>Some random paragraph</p> </div>

但是，使用min-height:inherit它会从父容器继承min-height值。

 * {margin:0;} body { background: gray; min-height: 100vh; /* look here */ }.container { background: silver; margin: 0 20px; min-height: inherit; /* look here */ }

 <div class="container"> <h1>Some generic title</h1> <p>Some random paragraph</p> </div>

如果它总是覆盖视口高度，我会直接在.container上设置min-height:100% 。

 * {margin:0;} body { background: gray; }.container { background: silver; margin: 0 20px; min-height: 100vh; /* look here */ }

 <div class="container"> <h1>Some generic title</h1> <p>Some random paragraph</p> </div>

Answer 2

 *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ddd; min-height: 100vh; height: 100vh; }.container { background: #aaa; max-width: 500px; margin: 0 auto; padding: 1rem; min-height: 100%; height: 100%; } /* Uncomment for the expected behaviour */ /* html, body { height: 100% } */

 <div class="container"> <h1>Some generic title</h1> <p>Some random paragraph</p> </div>