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

Posted 2023-03-06

【中文标题】如果页面高度较短，请确保页脚位于页面底部 [重复]

【英文标题】：Ensure that the footer is on bottom of the page if the page has a short height [duplicate]

【发布时间】：2020-05-28 13:33:10

【问题描述】：

我想要一个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>

【问题讨论】：

这能回答你的问题吗？ CSS to make html page footer stay at bottom of the page with a minimum height, but not overlap the page

【参考方案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/

【讨论】：

完美！我添加了contentEditable，看看如果主容器的高度增加了会发生什么。

【参考方案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>

【讨论】：

谢谢，但如果主容器高度增加，这将不起作用：尝试一下，您会看到重叠。

嗯，我知道了，下次会测试更多！