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％但不起作用。

这是一个小提琴：http://jsfiddle.net/a6QTv/1/

Answer 1

使用CSS-Tricks中的Sticky Footer技术：

<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>

Answer 2

试试这个css -

.container {
   margin: 0 auto;
}

footer {
  margin: 0 auto;
  position: absolute;
  bottom:0;
  height: 2.4em;
  border-top: 1px solid black;
}

如何将粘性页脚放置在绝对容器的底部

2 个答案: