始终仅使用 css 在正文底部显示一个 div

Question

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

黑色边框是浏览器窗口

演示（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>