如果页面的高度较短，请确保页脚位于页面底部 [英] Ensure that the footer is on bottom of the page if the page has a short height

问题描述

我希望有一个页脚：

• at即使 main-container 的高度很短，也可以放在页面底部，例如只有300像素高。在这种情况下，应添加较大的垂直边距。
  
  可能类似于 height（viewport）-height（main-container）-height（header）

• at the bottom of the page, even if the main-container is very short in height, e.g. only 300px high. In this case a big vertical margin should be added.
  Probably of something like height(viewport) - height(main-container) - height(header)

，在< div id = main-container> ，所以我不想将其放置在位置：固定或位置：绝对。

in the normal flow of the body, after <div id="main-container">, so I don't want to place it with position: fixed or position: absolute.

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

if the main-container is big (e.g. 1 page or more), then only a few margin should be added between main-container and footer (to the contrary of bullet point 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>

推荐答案

实际上是使用display：flex

actually , a very possible duplicate of Fill remaining vertical space with CSS using display:flex

用CSS填充剩余的垂直空间

You may take a look at flex and 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/

这篇关于如果页面的高度较短，请确保页脚位于页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！