使用Twitter Bootstrap将页脚粘贴到页面底部
使用Twitter Bootstrap将页脚粘贴到页面底部
提问于 2012-07-19 15:31:36
我有一些网页，没有太多的内容和页脚坐在页面的中间，但我希望它在底部。
我把我所有的页面都放在一个“文件夹”里了。
#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>
<li>Email:exampleemail@gmail.com</li>
</ul>
</div>
</div>
</div>
</div>我想让页脚保持流畅。
回答 6
Stack Overflow用户
回答已采纳
发布于 2012-07-19 17:43:22
正如注释中所讨论的，您的代码基于此解决方案：https://stackoverflow.com/a/8825714/681807
这个解决方案的一个关键部分是将height: 100%添加到html, body中，这样#footer元素就有了一个可以使用的基本高度--这在您的代码中是缺失的：
html,body{
height: 100%
}你还会发现使用bottom: -50px会遇到问题，因为当没有太多内容时，这会把你的内容推到下面。您必须在#footer之前的最后一个元素中添加margin-bottom: 50px。
Stack Overflow用户
发布于 2014-02-06 21:22:16
只需在页脚中添加navbar-fixed-bottom类即可。
<div class="footer navbar-fixed-bottom">Bootstrap 4更新-
正如Sara Tibbetts所提到的，class是固定的
<div class="footer fixed-bottom">Stack Overflow用户
发布于 2017-10-17 15:31:28
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11555931
复制相关文章
相似问题
腾讯云开发者
