CSS - 即使内容不足，也将页脚放在页面底部[重复]答案

【问题标题】：CSS - Place the footer on the bottom of the page even if not enough content [duplicate]CSS - 即使内容不足，也将页脚放在页面底部[重复]
【发布时间】：2022-01-07 05:04:33
【问题描述】：

使用HTML/CSS，即使有no enough content，我也需要将footer放在页面的bottom上。

如果有很多内容导致滚动，很容易实现这一点。当没有足够的内容时出现问题，因为在这种情况下，页脚会上升。

这里有一张图片可以更清楚地说明这一点：

我有以下起始代码：

CSS

body {
    margin: 0;
}
#header, #content, #footer {
    padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    bottom: 100px;
    left: 0;
    right: 0;
    background-color: #F63;
    overflow: auto;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

HTML

<div id="header">
There is the Header
</div>
<div id="content">
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
    hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

Jsfiddle 预览：https://jsfiddle.net/bk5ow9us/ （尝试调整窗口的高度）

知道如何实现这一目标吗？

重要

我还需要一个适用于 IE（版本 >= 11）的有效解决方案，而不仅仅是 FF 和 Chrome。

【问题讨论】：

这样吗？ jsfiddle.net/bk5ow9us/1
仅供参考，网站上已经有大约 3,000 个问题（字面意思）。我敢打赌，您可以通过一些搜索找到答案。
Ofc 是重复的，这个问题几乎每天都会被问到。我们应该将它们指向 SO 文档，这就是它们的全部意义
@StefanBob 我正在等待他们将结束问题作为指向 SO Docs 的指针...
那将是理想的

标签： html css

【解决方案1】：

如果您愿意，可以使用 flexbox 粘性页脚布局。

我会使用min-height: 100vh; 而不是height: 100%;

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.content {
  /* Include `0 auto` for best browser compatibility. */
  flex: 1 0 auto;
}

.header, .footer {
  background-color: grey;
  color: white;
}

<div class="header">
  <h2>Header</h2>
</div>

<div class="content">
  <h1>Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
</div>

<div class="footer">
  <h4>Footer</h4>
</div>

【讨论】：

你有 jsfiddle 的例子吗？
更新的答案，即使你可以像我一样复制+粘贴
它在 IE 上不起作用，请查看这张图片：image.ibb.co/m1UAvk/image.png，我是否必须在 CSS 中添加一些内容才能让它在那里工作？
可能必须在旧版本的 IE 中使用前缀。你可以在这里the-echoplex.net/flexyboxes
我使用了这个配置：mcaf.ee/jyvr1m，但同样适用于 FF 和 Chrome，但不适用于 IE11。你能试试你的IE，调整一下配置，然后把链接给我吗？谢谢。

【解决方案2】：

您可以通过两种方式做到这一点。一种是使用 flexbox，并将内容区域设置为flex-grow，以便默认填充可用空间。

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    flex: 1 0 0;
    background-color: #F63;
}
#footer {
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

或者您可以绝对定位页脚，并在body 上使用padding 来保留页脚所在的空间。

* {box-sizing:border-box;}
body {
    margin: 0;
    padding-bottom: 100px;
    position: relative;
}
#header, #content, #footer {
	padding: 10px;
}
#header {
    height: 100px;
    background-color: #abcdef;
}
#content {
    left: 0;
    right: 0;
    background-color: #F63;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: #abcdef;
}

<div id="header">
There is the Header
</div>
<div id="content">
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
	hello world<br/>
</div>
<div id="footer">
There is the Footer
</div>

【讨论】：

【解决方案3】：

我遇到了同样的问题。这样就解决了。

#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

【讨论】：