使用Twitter Bootstrap将页脚粘到页面底部 [英] Make footer stick to bottom of page using Twitter Bootstrap

问题描述

我有一些网页没有太多的内容，页脚位于页面的中间，但我想要它在底部。

I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.

我将所有的网页放在持有人中

I have put all my pages in a "holder"

#holder {
  min-height: 100%;
  position:relative;
}

然后对我的页脚使用以下CSS

And then used the following CSS for my footer

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

我的页脚的html

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:[e-mail]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想保持页脚流畅。

推荐答案

正如在您对此解决方案的代码所做的评论中所讨论的： http：/ /stackoverflow.com/a/8825714/681807

As discussed in the comments you have based your code on this solution: http://stackoverflow.com/a/8825714/681807

此解决方案的关键部分之一是添加 height：100％ 到 html，body 因此 #footer 这是您的代码缺少的：

One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:

html,body{
    height: 100%
}

您也会发现使用会遇到问题bottom：-50px ，因为当没有太多内容时，这会将您的内容推向折叠。您必须向 #footer 之前的最后一个元素添加 margin-bottom：50px 。

You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.

这篇关于使用Twitter Bootstrap将页脚粘到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！