我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
对于Sticky Footer，我们在HTML中使用了两个DIV来实现基本的Sticky Footer效果。这样写:
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}
其他回答
在这里，你会发现HAML (http://haml.info)的方法，导航栏在顶部，页脚在页面底部:
%body
#main{:role => "main"}
%header.navbar.navbar-fixed-top
%nav.navbar-inner
.container
/HEADER
.container
/BODY
%footer.navbar.navbar-fixed-bottom
.container
.row
/FOOTER
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
增加身体
{ padding-bottom: 70px; }
一个工作的例子，Twitter引导不是黏脚
<script>
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight)
$('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>
在用户打开开发工具或调整大小窗口时总是更新的版本。
<script>
$(document).ready(function() {
setInterval(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
var marginTop = (docHeight - footerTop + 10);
if (footerTop < docHeight)
$('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
else
$('#footer').css('margin-top', '0px');
// console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
}, 250);
});
</script>
您至少需要一个带有#footer的元素
当不需要滚动条时，如果内容适合屏幕，只需将10的值更改为0 如果内容不适合屏幕，滚动条将显示出来。
使用下面的类将它推到页面的最后一行，也使它到页面的中心。 如果你正在使用ruby on rails HAML页面，你可以使用下面的代码。 % footer.card.text-center
请不要忘记使用twitter bootstrapp
下面是如何从官方页面实现这个功能:
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;
}
}
