【问题标题】：Always show a div at the bottom of body with css only始终在正文底部显示一个仅使用 css 的 div
【发布时间】：2014-12-11 20:35:12
【问题描述】：

我想一直看到页面的页脚。所以我想要它粘性。它不应该取决于页面上有多少内容。所以我想出了position:fixed 和bottom:0。当然这可以正常工作，但我不希望页脚位于浏览器底部，而是位于文档正文的底部。

黑色边框是浏览器窗口

Demo (jsfiddle)

有没有办法做到这一点？

【问题讨论】：

所以你希望它在正文下方，但如果有更多内容则固定在底部？
试试这个（粘性页脚）-jsfiddle.net/rkftqr0r 和 jsfiddle.net/c5artgp8
使用 jquery 在两个类之间交替，具体取决于页脚与 $(window).height() 的关系
又一个副本？ stackoverflow.com/questions/42294/…
您可以在此处找到不同方法的列表：stackoverflow.com/questions/18469262/…

标签： css css-position sticky-footer

【解决方案1】：

固定位置将项目置于正常页面流之外。将您的页脚位置更改为relative，它将保留在您的内容 div 的底部。

Fiddle

[role="footer"] {
    width:100%;
    padding:10px;
    position:relative;
    bottom:0; /* should be on bottom of #content */
    background-color:rgba(100,255,100,0.8);
    border:1px solid #0f0;
}

【讨论】：

但是如果内容（或正文）太高，页脚将被隐藏
您没有提到滚动时的粘滞页脚。您应该更新您的问题以反映所需的行为，因为它们是两个不同的东西。

【解决方案2】：

如何指定最大高度，然后如果内容超过它，则自动滚动

#content {
    border:1px dashed #f00;
    overflow:auto;
    max-height:300px;
}

http://jsfiddle.net/nt1u0o1n/6/

那是 Brians JFiddle 我刚刚添加了一些 CSS 来说明我的意思

如果你想要响应式布局，你可以试试这个

http://jsfiddle.net/nt1u0o1n/21/

这仍然是 Brians JFiddle 我刚刚添加了一些 CSS 来再次说明我的意思

【讨论】：

这是个好主意，但如果他正在拍摄流畅的布局（我假设他是，这会提示问题），当您调整浏览器大小时，页脚会低于视口。
这是真的，然后让它响应的唯一方法是将最大高度设置为百分比，但我记得人们之前遇到过问题
我将其更新为使用百分比高度，尽管它需要一些数学运算和页脚的百分比高度才能使其恰到好处

【解决方案3】：

我认为您的页脚位置必须是“相对”而不是“固定”... 所以你的页脚会出现在
你的身体结束了…… 希望它有效...

【讨论】：

【解决方案4】：

由于position:sticky 的浏览器支持在这里，有一个简单的解决方案：

.content {
  padding: 5pt;
  border: 1px dashed rgb(200, 0, 0);
}

.footer {
  padding: 5pt;
  background-color: rgba(0, 150, 0, .8);
  position: sticky;
  bottom: 0;
}

<div class="content">
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...<br/>
	Content...
</div>
<div class="footer">I'm the footer!</div>

【讨论】：