HTML，CSS粘的页脚（增长量）(HTML, CSS sticky footer (growing

我试图在具有动态高度（增长量）一个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，但问题解决了！感谢您及时回复！

Answer 1:

通过使用绝对化，页脚和mainContainer上受，你把他们。如果您使用绝对和设置页脚的底部，这将只是坚持视口的底部。

对于粘性，你应该使用相对单位，并根据需要正确的高度。

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％，将无中心内联）

Answer 2:

所以，你正在寻找一个中心组件粘页脚。做到这一点的最简单的方法是创建在底部的固定位置与元件在其内居中的div（基本上，具有特定宽度和余量一个div：自动）。

您可以在看到这样的一个例子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>

粘页脚停留在视口的底部，在页面居中。

文章来源: HTML, CSS sticky footer (growing content)