我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
我已经使用twitter引导框架很长一段时间了,他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部,我已经使用了twitter bootstrap网站提供的启动器模板,但仍然没有运气,有什么想法吗?
当前回答
我写我的简化粘脚代码与填充使用LESS。这个答案可能离题了,因为这个问题没有谈到填充,所以如果你有兴趣,可以查看这篇文章了解更多细节。
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
其他回答
除了刚才添加的CSS之外,还需要在关闭wrap div之前添加push div
HTML的基本结构是
<div id="wrap">
page content here
<div id="push"></div>
</div> <!-- end wrap -->
<div id="footer">
footer content here
</div> <!-- end footer -->
实时视图 编辑视图
推div应该在包装后,而不是在..就像这样
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
Html
<footer class="footer navbar-fixed-bottom">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
CSS
.footer {
position: fixed;
bottom: 0;
}
我写我的简化粘脚代码与填充使用LESS。这个答案可能离题了,因为这个问题没有谈到填充,所以如果你有兴趣,可以查看这篇文章了解更多细节。
@footer-padding: 40px; // Set here the footer padding
@footer-inner-height: 150px; // Set here the footer height (without padding)
/* Calculates the overall footer height */
@footer-height: @footer-inner-height + @footer-padding*2;
html {
position: relative;
min-height: 100%;
}
body {
/* This avoids footer to overlap the page content */
margin-bottom: @footer-height;
}
footer{
/* Fix the footer on bottom and give it fixed height */
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height;
padding: @footer-padding 0;
}
这里有一个方法,将添加一个粘脚,不需要任何额外的CSS或Javascript,除了什么已经在Bootstrap,不会干扰你当前的页脚。
示例:Easy Sticky Footer
只需复制并粘贴到您的代码。不吵闹不混乱。
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>