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

Question

我想要一个footer:

在页面底部，即使 main-container 的高度很短，例如只有 300px 高。在这种情况下，应添加较大的垂直边距。
可能类似于 height(viewport) - height(main-container) - height(header)
在正文的正常流中，在<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>

有用 link : 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>

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

Ensure that the footer is on bottom of the page if the page has a short height

html

css

footer