Question

我正在尝试修复页脚的错误，因为您可以看到页脚没有像应该的那样停留在浏览器的底部，如果页面没有足够的内容，它会停留在页面的中间位置，它只是跟随div的其余部分的高度。网站示例：http://produccion.pugle.net/sarahbcn2/membership-cancelled/

所以我尝试用主div包装器上的一些css命令修复它，比如overflow：auto;或身高：汽车;和页脚相同的命令，但没有成功。如何解决这个问题的任何想法？感谢名单

Answer 1

我希望此决定可以帮助您DEMO Sticky Footer

<div class="page-wrap">

  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>

  <button id="add">Add Content</button>  

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 142px; 
}
.site-footer {
  background: orange;
}

Answer 2

对页脚应用更改（使用固定位置）：

footer {
    background: none repeat scroll 0 center #fff;
    bottom: 0;
    display: block;
    margin: 0 auto;
    padding: 80px 0 0;
    position: fixed;/*fixed position*/
    width: 100%;
}

不要将页脚固定在底部

2 个答案: