html - 如何在绝对容器底部放置粘性页脚

Question

我的整个网站容器是页面居中的黑色背景上的白色框。 为此，内容可以调整我必须设置的框的大小:

.container {
  position: absolute;
  background-color: white;
  min-height: 90%;
  top: 5%;
  width: 95%;
  left: 2.5%;
}

尝试在此处添加页脚如下所示:

footer {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  text-align: center;
  height: 2.4em;
  border-top: 1px solid black;
}

为了将页脚放到底部，我假设我必须为实际内容定位容器

%header
%section.content /<----
%footer

将最小高度设置为 100%，但这没有用。

这是一个 fiddle :http://jsfiddle.net/a6QTv/1/

Answer 1

使用 Sticky Footer来自 CSS-Tricks 的技术:

<div class="page-wrap">
    Content!  
</div>

<footer class="site-footer">
    I'm the Sticky Footer.
</footer>

<style type="text/css">
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}
</style>