HTML,CSS粘性页脚(增长内容)

Question

HTML,CSS粘性页脚(增长内容)

ton*_*man 4 html css sticky-footer dynamic-content

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

Run Code Online (Sandbox Code Playgroud)

和以下的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; 
}

Run Code Online (Sandbox Code Playgroud)

然而,mainContainer的内容浮出并继续在页脚后面 - 而不是页脚位于底部.我试过几乎所有我能找到的东西,除了强迫我改变容器的显示属性的例子,因为我需要它让它漂浮在中间.

关于我是白痴的哪些线索？谢谢!!

我需要使用.push进行更多操作,但这解决了问题!感谢您及时回复!

Answer 1

Cas*_*yne 7

通过使用绝对值,页脚和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; }

Run Code Online (Sandbox Code Playgroud)

订单顺利

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

Run Code Online (Sandbox Code Playgroud)

这样,页脚总是有足够的空间并设置在底部.margin:wrap内部的自动将包裹中心(只要它不是宽度:100%,它将居中没有内联)

归档时间：	12 年，9 月前
查看次数：	12021 次
最近记录：	12 年，2 月前