HTML和身体设定高度

Question

如果我设置了以下CSS：

html,
body {
  min-height: 100vh;
}

.container {
  height: 100%;
}

<div class="container">
  Hello
</div>

容器未填满整个高度区域 但如果我更改最小高度：100vh，高度：100vh 有用 ！ 为什么会这样？

Answer 1

如果将容器设置为100％，则容器的大小将仅适合容器div中内容高度的100％。

100vh将容器设置为100垂直高度，其中垂直高度是页面的整个高度。

希望这可以帮助您了解差异

html,
body {
  min-height: 100vh;
}

.container {
  height: 100%;
  border:1px solid red;
}

<div class="container">
  Hello<br> How are you?
</div>

html,
body {
  min-height: 100vh;
}

.container {
  height: 100vh;
  border:1px solid red;
}

<div class="container">
  Hello<br> How are you?
</div>

Answer 2

这是Webkit中非常老的错误（即Chrome和Safari）。错误报告here。现在已经十岁了，还没有修复方法，这太疯狂了！

  

当块的高度由最小高度/最大高度确定时，具有百分比高度的子代的尺寸不正确