始终只在css的底部显示一个div

Question

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

黑色边框是浏览器窗口

Demo (jsfiddle)

有没有办法实现这个目标？

Answer 1

由于此处有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>

Answer 2

固定位置将该项目置于正常页面流程之外。将您的页脚位置更改为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;
}

Answer 3

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

#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以显示我的意思，再次

Answer 4

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