CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 使用Twitter Bootstrap将页脚粘到页面底部大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一些网页没有太多的内容,页脚坐在页面的中间,但我想它在底部。

我把所有的网页放在一个“持有人”

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

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

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:exampleemail@gmail.com</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我想保持页脚流体。

解决方法

正如在您的代码基于此解决方案的评论中讨论的: http://stackoverflow.com/a/8825714/681807

这个解决方案的关键部分之一是添加height:100%到html,body所以#footer元素有一个基本高度来工作 – 这从您的代码中缺少:

html,body{
    height: 100%
}

你也会发现,你会遇到使用底部:-50px的问题,因为这将推动你的内容下没有太多的内容。你必须添加margin-bottom:50px到#footer之前的最后一个元素。

大佬总结

以上是大佬教程为你收集整理的css – 使用Twitter Bootstrap将页脚粘到页面底部全部内容,希望文章能够帮你解决css – 使用Twitter Bootstrap将页脚粘到页面底部所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。