我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦，很可能是因为Twitter引导本质上是响应式的。使用Twitter引导，我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
它看起来像高度:100%的“链”被打破在div#main。试着增加高度:100%增加高度，这可能会让你更接近目标。
其他回答
下面是使用Flexbox的最新版本Bootstrap(在撰写本文时为4.3)的解决方案。
HTML:
<div class="wrapper">
<div class="content">
<p>Content goes here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wrapper {
flex-grow: 1;
}
一个代码依赖的例子:https://codepen.io/tillytoby/pen/QPdomR
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;
});
发现这里的片段工作得很好
Html:
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></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;
}
使用下面的类将它推到页面的最后一行，也使它到页面的中心。 如果你正在使用ruby on rails HAML页面，你可以使用下面的代码。 % footer.card.text-center
请不要忘记使用twitter bootstrapp
这现在包含在Bootstrap 2.2.1中。
引导3.倍
使用navbar组件并添加.navbar-fixed-bottom类:
<div class="navbar navbar-fixed-bottom"></div>
引导4.倍
<div class="navbar fixed-bottom"></div>
别忘了添加body {padding-bottom: 70px;}或以其他方式覆盖页面内容。
文档:http://getbootstrap.com/components/ # navbar-fixed-bottom
