无法固定页脚在底部

Question

我正在尝试修复页脚的一个错误，正如您所看到的，页脚没有像应该一样停留在浏览器底部，如果页面内容不足，则停留在页面中间，它只是跟随其余div的高度。网站示例：http://produccion.pugle.net/sarahbcn2/membership-cancelled/ 因此，我尝试使用一些CSS命令在主div包装器上进行修复，例如overflow:auto;或height:auto;并为页脚使用相同的命令，但没有成功。有任何想法解决这个问题吗？ 谢谢

- bonini81

---

请始终将您的代码放在此处，而不是链接到网站... - Bhojendra Rauniyar

谢谢你的提示，下次会注意的！ - bonini81

Answer 1

我希望这个决定能帮助你实现演示和固定页脚。

<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;
}

- Alex Wilson

---

谢谢你的帮助，但实际上解决问题的方法是将页脚放在固定位置，position: fixed; /固定位置/。 - bonini81

糟糕，我刚才发现这是正确的答案，另一个答案会导致页脚无论如何都粘在页面上，当有大量内容时就会成为问题，因为即使有内容可以滚动，页脚仍然会显示出来，所以这个答案实际上是我正在寻找的答案，谢谢Alex，因为页脚只在必要时显示，并且固定在底部而不是无论如何都粘在那里。 - bonini81

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%;
}

- Bhojendra Rauniyar