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

Question

我想要一个footer:

• 在页面底部，即使main-container 的高度非常短，例如只有 300px 高。在这种情况下，应添加较大的垂直边距。
  可能类似于height(viewport) - height(main-container) - height(header)

• 在body的正常流程中，在<div id="main-container">之后，所以我不想和position: fixed或者position: absolute放在一起。

• 如果 main-container 很大（例如 1 页或更多），则应在 main-container 和 footer 之间添加少量边距（与要点 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

实际上，Fill remaining vertical space with CSS using display:flex 很可能重复

你可以看看 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>

有用的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

给你

#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>