我正在为自己的一生而努力，制作一个简单的页面，其中的容器一直延伸到底部。预期的结果：
#Main至少与视口一样高，但是如果添加内容，则可以进一步拉伸。body至少与视口一样高，但是如果添加内容，则可以进一步拉伸。html至少与视口一样高，但是如果添加内容，则可以进一步拉伸。我不知道为什么这似乎是不可能的。我已经尝试过各种高度，最小高度等的组合，但是它们都以一种或另一种方式失败。关于<body>的某些问题，min-height无效。
这里是一个小提琴：https://jsfiddle.net/r51tvu2b/
[注意，body不遵守min-height: 100%声明。我现在很激动，无法想象。
注意：我发现解决方案“有效”，但是添加内容时，body仍保持在视口高度的100％，这不是理想的结果。也就是说，在我的小提琴中，红线应延伸到视口的底部，如果内容较长，则应延伸到内容的底部。
我在CSS中做了2个小更改，我想它现在可以完成您想要的工作。检查代码段
html {
position: relative;
margin: 0;
padding: 0;
}
body {
position: relative;
background: gray;
margin: 0;
padding: 0;
/* changed here */
min-height: 100vh;
border-bottom: 3px solid red;
}
#Main {
/* changed here */
min-height: 100vh;
width: 50%;
margin: 0px auto;
background: white;
}<div id="Main">
I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
<hr>
Let's review:
<br>HTML is min-height: 100% -- it's as least as tall as the viewport.
<br>BODY is min-height: 100% -- it's as least as tall as HTML.
<br>*I* am height: 100% -- WHY AM I NOT TALL
<hr>
Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
<hr>
One more thing, when my contents grow, so should the body.
<button onclick="document.getElementById('content').style.display='block';">
Click me to add content.
</button>
<div id="content" style="height: 600px; background: green; display: none;">
big content.
</div>
</div>希望这会有所帮助。
html {
margin: 0;
padding: 0;
}
body {
position: relative;
background: gray;
border-bottom: 3px solid red;
}
#Main {
min-height: 100vh;
width: 50%;
margin: 0px auto;
background: white;
}<body>
<div id="Main">
I SHOULD BE AT LEAST AS TALL AS THE VIEWPORT.
<hr>
Let's review:
<br>HTML is min-height: 100% -- it's as least as tall as the viewport.
<br>BODY is min-height: 100% -- it's as least as tall as HTML.
<br>*I* am height: 100% -- WHY AM I NOT TALL
<hr>
Another WTF: the entire background is gray, yet the BODY's bottom doesn't stretch to the bottom.
<hr>
One more thing, when my contents grow, so should the body.
<button onclick="document.getElementById('content').style.display='block';">
Click me to add content.
</button>
<div id="content" style="height: 600px; background: green; display: none;">
big content.
</div>
</div>
</body>我相信您应该使用的是100vh，这意味着100％的视口高度。
我找到了一种使用flexbox的方法，该方法具有近乎普遍的支持。似乎通过将HTML设置为display: flex; min-height: 100%，flexbox至少将成为视口的大小。身体是flexbox的子代，将“拉伸”以适合flexbox的高度。如果body的内容比视口高，它们也会导致html弹性框也变得更高。
我仍然不知道为什么min-height: 100%上的body不起作用，因为在检查时HTML文档显然具有高度。我尝试设置实际高度，但得到了更多没有意义的结果-例如，尽管body具有#Main- -那怎么可能？
body背景超出身体本身的实际含量也没有意义。
我现在将停止我的文章，因为在开始撰写有关CSS的糟糕程度的整篇文章之前，我只能获得太多的BS。
height: 100%body