使用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:[e-mail]</li> </ul> </div> </div> </div> </div> 

我想保持页脚stream畅。

Answer 1

正如您在这个解决scheme中基于您的代码的评论中所讨论的： https : //stackoverflow.com/a/8825714/681807

此解决scheme的关键部分之一是将height: 100%添加到html, body所以#footer元素有一个基础高度工作 – 这是从您的代码中缺less：

 html,body{ height: 100% } 

您还会发现，使用bottom: -50px会遇到问题，因为这会在内容不多的情况下将您的内容推bottom: -50px 。 您必须将margin-bottom: 50px添加到#footer之前的最后一个元素。

Answer 2

只需将navbar-fixed-bottom类添加到页脚即可。

 <div class="footer navbar-fixed-bottom"> 

Answer 3

http://bootstrapfooter.codeplex.com/

这应该可以解决你的问题。

 <div id="wrap"> <div id="main" class="container clear-top"> <div class="row"> <div class="span12"> Your content here. </div> </div> </div> </div> <footer class="footer" style="background-color:#c2c2c2"> </footer> 

CSS：

 html,body { height:100%; } #wrap { min-height: 100%; } #main { overflow:auto; padding-bottom:150px; /* this needs to be bigger than footer height*/ } .footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; padding-top:20px; color:#fff; } 

Answer 4

这里是一个使用css3的例子：

CSS：

 html, body { height: 100%; margin: 0; } #wrap { padding: 10px; min-height: -webkit-calc(100% - 100px); /* Chrome */ min-height: -moz-calc(100% - 100px); /* Firefox */ min-height: calc(100% - 100px); /* native */ } .footer { position: relative; clear:both; } 

HTML：

 <div id="wrap"> <div class="container clear-top"> body content.... </div> </div> <footer class="footer"> footer content.... </footer> 

小提琴

Answer 5

使用引导类对你有利。 navbar-static-bottom将它留在底部。

 <div class="navbar-static-bottom" id="footer"></div> 

Answer 6

上面提到的大部分解决scheme都不适合我。 但是，下面给出的解决scheme工作得很好：

 <div class="fixed-bottom">...</div> 

资源