我已经使用twitter引导框架很长一段时间了，他们最近更新到版本3!
我有麻烦让粘性页脚粘到底部，我已经使用了twitter bootstrap网站提供的启动器模板，但仍然没有运气，有什么想法吗?
当前回答
用Haml & Sass的话说就是:
Haml for app/view/layouts/application.html.haml
%html
%head
%body
Some body stuff
%footer
footer content
app/assets/stylesheet /application.css.sass
$footer-height: 110px
html
position: relative
min-height: 100%
body
margin-bottom: $footer-height
body > footer
position: absolute
bottom: 0
width: 100%
height: $footer-height
基于http://getbootstrap.com/examples/sticky-footer-navbar/
其他回答
这个问题已经被flexbox彻底解决了:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
HTML
<body class="Site">
<header>…</header>
<main class="Site-content">…</main>
<footer>…</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
只需将类navbar-fixed-bottom添加到页脚。
<div class="footer navbar-fixed-bottom">
除了刚才添加的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 -->
实时视图 编辑视图
你可以简单地尝试在页脚导航栏上添加一个类:
navbar-fixed-bottom
然后创建一个CSS命名为custom.css和body padding像这样..
body { padding-bottom: 70px; }
简单的 js
if ($(document).height() <= $(window).height()) {
$("footer").addClass("navbar-fixed-bottom");
}
Update # 1
$(window).on('resize', function() {
$('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
