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

【问题标题】：Div height: 100% not working with body min-height: 100vhDiv 高度：100% 不适用于身体最小高度：100vh
【发布时间】：2021-05-26 15:21:15
【问题描述】：

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

Here you can find a codepen with the expected behaviour commented out at the end of the 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>

【问题讨论】：

刚刚在同样的问题上浪费了一个小时。我讨厌 CSS。

标签： html css

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

如果min-height:100% 总是覆盖视口高度，我会直接在.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>

【讨论】：

这让我头脑清醒了，我假设孩子的身高取决于实际计算的身高值。谢谢！

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

【讨论】：