我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
我通常熟悉使用css刷新页脚的技术。
但是我在将这种方法用于Twitter引导时遇到了一些麻烦,很可能是因为Twitter引导本质上是响应式的。使用Twitter引导,我不能得到页脚冲洗到页面底部使用上述博客文章中描述的方法。
当前回答
在这里,你会发现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
其他回答
你可以使用jQuery来处理这个问题:
$(function() {
/**
* Read the size of the window and reposition the footer at the bottom.
*/
var stickyFooter = function(){
var pageHeight = $('html').height();
var windowHeight = $(window).height();
var footerHeight = $('footer').outerHeight();
// A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
// and thus is outside of its container and counted in $('html').height().
var totalHeight = $('footer').hasClass('fixed-bottom') ?
pageHeight + footerHeight : pageHeight;
// If the window is larger than the content, fix the footer at the bottom.
if (windowHeight >= totalHeight) {
return $('footer').addClass('fixed-bottom');
} else {
// If the page content is larger than the window, the footer must move.
return $('footer').removeClass('fixed-bottom');
}
};
// Call when this script is first loaded.
window.onload = stickyFooter;
// Call again when the window is resized.
$(window).resize(function() {
stickyFooter();
});
});
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;
});
使用这段代码在引导它的工作
<div class="navbar fixed-bottom">
<div class="container">
<p class="muted credit">Footer <a href="http://google.com">Link</a> and <a
href="http://google.com/">link</a>.</p>
</div>
</div>
另一种可能的解决方案是使用媒体查询
@media screen and (min-width:1px) and (max-width:767px) {
.footer {
}
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
@media screen and (min-width:1120px){
.footer{
bottom: 0;
width: 100%;
position: absolute;
}
}
一个工作的例子,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 如果内容不适合屏幕,滚动条将显示出来。