CSS主体100%高度，必要时溢出

Question

我知道如何确保HTML正文垂直拉伸/收缩到浏览器视口的100%高度（通过在正文和HTML规则中设置100%高度）。

我还知道，正常的HTML流会导致容器垂直拉伸以包含其内容（如果设置正确的话）。

然而，我似乎无法同时做到这两点。

也就是说，我无法击败CSS来确保当我的页面在高分辨率屏幕上查看时，它会垂直拉伸以不留间隙，并确保如果我的页面是在低分辨率屏幕上观看的，它的主体会延伸过视口（以容纳所有内容）并引入滚动条。

对我来说，这是一种理想的行为，但我遗憾地认为，这不能完全通过CSS实现。我知道我可以在JavaScript中很容易地做到这一点，但我希望只在CSS中就能做到。

这可能吗，还是我被迫使用JavaScript？

编辑：我研究、尝试和测试了很多技术，但似乎都做不到。看起来我将不得不回到JavaScript。

Answer 1

好的，所以这对我来说肯定有效：

html {
   height: 100%;
}
body {
   min-height: 100%;
   display: flex;
}
#wrapper {
   width: 100%; /* Necessary because of side-effect of flex */
   height: 100%;
}

这正是我以前尝试过的，但我想我会尝试一下这个新的CSS功能"flex"，它已经成功了。因此，CSS管理者/创建者似乎终于通过动态高度和垂直居中解决了这些关键问题。

我希望这能帮助其他陷入这个问题的人。

Answer 2

您可以使用最小高度css属性。

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

Answer 3

min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/

Answer 4

从一个似乎与我的问题几乎相同的问题中获得灵感：使主体具有100%的浏览器高度

这对我有效：

html {
  height: 100%;
}
body {
  min-height: 100%;
}