如何在绝对容器底部定位粘性页脚答案

【问题标题】：How to position sticky footer at bottom of an absolute container如何在绝对容器底部定位粘性页脚
【发布时间】：2014-04-14 13:25:24
【问题描述】：

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

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

【问题讨论】：

标签： html css sass haml sticky-footer

【解决方案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>

【讨论】：

它适用于我，方法是在页脚上方放置一个带有类 page-wrap 的 div，将类站点页脚添加到页脚并将所有 css 粘贴到 css 文件的底部作为概念证明如此处所示：jsfiddle.net/gk6QM
jsfiddle.net/gk6QM/1 在切换到 em 且未使用其使用的所有空间时损坏。我不需要那么大的页脚，我想将它移到底部，当我切换到 em 时它会中断
尝试从 .container 和 .body-section 中删除高度。这些样式可能会与 css stickyfooter 的默认结构作斗争。在 .site-footer, page-wrap:after {height: 20px} 中设置任何页脚高度，并在 .page-wrap{margin-bottom: 20px} 中匹配该值的负数
jsfiddle.net/gk6QM/2 仍然无法正常工作。请记住 .container 是绝对的，需要在屏幕上居中，因此是最小身体高度。删除它会变成这个小提琴中发生的事情
position:absolute 不是必需的。 Stickyfooter 确实使用建议的结构工作，这个答案的范围正在扩大。居中见 --> use margin-left:auto; and margin-right:auto

【解决方案2】：

试试这个 CSS -

.container {
   margin: 0 auto;
}

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

【讨论】：

将页脚设置为绝对会使文本隐藏在底部。我想我可以设置一点填充