如果页面高度很短，请确保页脚位于页面底部[重复]

Question

我想要一个页脚：

>

在页面底部，即使主容器的高度非常短，例如只有300px高。在这种情况下，应增加较大的垂直边距
可能是高度（视口）-高度（主容器）-高度（标题）

在身体的正常流动中，在

如果主容器很大（例如1页或更多），则在主容器和页脚之间只应添加少量边距（与要点1相反）

如何做到这一点？

#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }

<div id="header">Header</div>
<div id="main-container">
Hello<br>
World
</div>
<div id="footer">
Bye-bye. <-- this should be on bottom even if main-container has only 2 lines
</div>




Answer 1

干得好

css lang-css prettyprint-override">#footer {  position: absolute; bottom: 0; width: 100%; height: 2rem; }
#main-container { padding-bottom: 2rem; }

<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>

Answer 2

实际上，使用display:flex用CSS填充剩余垂直空间的一个非常可能的复制

您可以看看flex和flex grow。

body {
display:flex;
flex-flow:column;
min-height:100vh;
margin:0;
}
#main-container {
flex:1;
}
#footer {}


/* = */
#header { background-color: yellow; }
#main-container { background-color: red; }
#footer { background-color: green; }

<div id="header">Header</div>
<div id="main-container" contentEditable>
Hello<br>
World
</div>
<div id="footer">
Bye-bye.
</div>