我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
下面是如何从官方页面实现这个功能:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
我刚刚测试了一下，它工作得很好!:)
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
相关的CSS代码如下:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
其他回答
HenryW的答案很好，尽管我需要做一些调整才能让它按我想要的方式工作。特别地，下面也处理:
避免“跳跃性”页面加载首先标记不可见和设置在javascript可见 优雅地处理浏览器大小调整 此外，如果浏览器变得更小，页脚变得比页面大，设置页脚备份 高度函数调整
以下是这些调整对我有效的方法:
HTML:
<div id="footer" class="invisible">My sweet footer</div>
CSS:
#footer {
padding-bottom: 30px;
}
JavaScript:
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
} else {
$('#footer').css('margin-top', '');
}
$('#footer').removeClass('invisible');
}
$(document).ready(function() {
setFooterStyle();
window.onresize = setFooterStyle;
});
这对我来说非常有效。
将这个类navbar-fixed-bottom添加到你的页脚。
<div class="footer navbar-fixed-bottom">
我是这样用的:
<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>
它在整个宽度的底部。
编辑:这将设置页脚始终可见，这是你需要考虑的事情。
保持简单。
footer {
bottom: 0;
position: absolute;
}
您可能还需要通过向正文添加等同于页脚高度的margin-bottom来抵消页脚的高度。
更简单的官方示例:http://getbootstrap.com/examples/sticky-footer-navbar/
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
增加身体
{ padding-bottom: 70px; }
