HTML、CSS 粘滞页脚（不断增长的内容）答案

【问题标题】：HTML, CSS sticky footer (growing content)HTML、CSS 粘滞页脚（不断增长的内容）
【发布时间】：2013-02-11 03:23:53
【问题描述】：

我试图在具有动态高度（不断增长的内容）的 div 底部获得一个粘性页脚。 div 需要浮动在页面中间（左右距离相同）。

我有以下 HTML（去掉了不相关的东西）：

<html>
<body>
  <div class="bodybackground">
    <div class="container"><!-- floats in the middle -->
      <div class="mainContainer"><!-- different color etc -->
        <!-- content with dynamic height -->
      </div>
      <footer class="pagefooter"></footer>
    </div> 
  </div>
</body>
</html>

和下面的 CSS（也去掉了不相关的东西）：

html {
  height: 100%;
  margin: 0px;
  padding: 0px; 
}
body { 
  margin: 0px;
  height: 100%; 
}
.bodybackground {
  height: 100%;
  min-height: 100%;
}

.container { 
  min-height: 100%;
  display: inline-block; /* needed make it float in the middle of body */
  top: 0px;
  position: relative;
  padding: 0px;
  padding-bottom: 158px; /* height of footer */
}
.mainContainer {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.pagefooter {
  position: absolute;
  bottom: 0px;
  margin: 0px;
  padding: 0px;
  height: 158px; 
}

然而 mainContainer 的内容浮出并继续在页脚后面 - 而不是页脚位于最底部。我已经尝试了几乎所有我能找到的东西，除了那些迫使我改变容器的显示属性的例子，因为我需要它来让它保持在中间浮动。

关于我在哪里是个白痴的任何线索？谢谢！！

我需要更多地使用 .push，但这解决了问题！感谢您的快速回答！

【问题讨论】：

标签： html css sticky-footer dynamic-content

【解决方案1】：

因此，您正在寻找具有居中组件的粘性页脚。最简单的方法是在底部创建一个固定位置的元素，其中包含一个居中的 div（基本上，一个具有指定宽度和边距的 div：auto）。

你可以在http://jsfiddle.net/gHDd8/看到一个例子——CSS基本上是

.outerBlockElement {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.innerBlockElement {
    width: 50%;
    margin: auto;
}

HTML 相当于

<div class="outerBlockElement">
    <p class="innerBlockElement">I am sticky footer text!</p>
</div>

粘性页脚位于视口底部，位于页面中心。

【讨论】：

【解决方案2】：

通过使用 absolute，footer 和 mainContainer 取决于您放置它们的位置。如果您使用 absolute 并将页脚设置为底部，它只会粘在视口的底部。

对于粘性，您应该在需要时使用相对单位和正确的高度。

html, body { width:100%; height:100%; }
#wrap { 
min-height:100%;
height:auto !important;
height:100%;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

订单进行

 <div id="wrap">
 <!--All of your content goes here-->
 <div class="push"></div>
 </div>
 <div class="pagefooter"></div>

这样，页脚总是有足够的空间并设置在底部。包裹内的边距：自动将使包裹居中（只要不是宽度：100％，它就会在没有内联的情况下居中）

【讨论】：