Div 高度：100% 不适用于 body min-height：100vh

Question

我遇到了对我来说意想不到的行为。我想将bodymin-height 设置为视口的高度（100vh），然后div在其中创建一个（具有容器类），它将占据主体的整个高度（100％），以便 div 延伸至少到视口的所有高度。除非这不会发生；实现此结果的唯一方法是将高度设置html为body100%。造成这种情况的技术原因是什么？div 不应该采用其父级 100% 的（最小）高度吗？

在这里你可以找到一个 codepen，其预期行为在 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值 not计算的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>

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

* {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>