HTML，CSS粘性页脚（增长内容）

Question

我试图在具有动态高度（增长内容）的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>

这样，页脚总是有足够的空间并设置在底部。 margin：wrap内部的自动将包裹中心（只要它不是宽度：100％，它将居中没有内联）

Answer 2

所以，你正在寻找一个带有居中组件的粘性页脚。 最简单的方法是在底部创建一个固定位置元素，其中包含一个居中的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>

粘性页脚停留在视口的底部，以页面为中心。

HTML，CSS粘性页脚（增长内容）

问题描述

2 个解决方案

解决方案1
7 已采纳 2013-02-26 03:16:52

解决方案2
0 2013-02-25 20:58:33

HTML，CSS粘性页脚（增长内容）

问题描述

2 个解决方案

解决方案1 7 已采纳 2013-02-26 03:16:52

解决方案2 0 2013-02-25 20:58:33

解决方案1
7 已采纳 2013-02-26 03:16:52

解决方案2
0 2013-02-25 20:58:33