4

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

4

2 回答 2

8

通过使用 absolute，页脚和 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％，它将在没有内联的情况下居中）

于 2013-02-26T03:16:52.793 回答
0

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

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

于 2013-02-25T20:58:33.790 回答