首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Twitter Bootstrap将页脚粘贴到页面底部

使用Twitter Bootstrap将页脚粘贴到页面底部
EN

Stack Overflow用户
提问于 2012-07-19 15:31:36
回答 6查看 206.7K关注 0票数 78

我有一些网页,没有太多的内容和页脚坐在页面的中间,但我希望它在底部。

我把我所有的页面都放在一个“文件夹”里了。

代码语言:javascript
复制
#holder {
  min-height: 100%;
  position:relative;
}

然后使用下面的CSS作为我的页脚

代码语言:javascript
复制
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

代码语言:javascript
复制
<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:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想让页脚保持流畅。

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2012-07-19 17:43:22

正如注释中所讨论的,您的代码基于此解决方案:https://stackoverflow.com/a/8825714/681807

这个解决方案的一个关键部分是将height: 100%添加到html, body中,这样#footer元素就有了一个可以使用的基本高度--这在您的代码中是缺失的:

代码语言:javascript
复制
html,body{
    height: 100%
}

你还会发现使用bottom: -50px会遇到问题,因为当没有太多内容时,这会把你的内容推到下面。您必须在#footer之前的最后一个元素中添加margin-bottom: 50px

票数 44
EN

Stack Overflow用户

发布于 2014-02-06 21:22:16

只需在页脚中添加navbar-fixed-bottom类即可。

代码语言:javascript
复制
<div class="footer navbar-fixed-bottom">

Bootstrap 4更新-

正如Sara Tibbetts所提到的,class是固定的

代码语言:javascript
复制
<div class="footer fixed-bottom">
票数 101
EN

Stack Overflow用户

发布于 2017-10-17 15:31:28

上面提到的大多数解决方案对我都不起作用。然而,下面给出的解决方案工作得很好:

代码语言:javascript
复制
<div class="fixed-bottom">...</div>      

Source

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11555931

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档