今天要说的是前端开发过程中的一个小技巧,没有很大的技术含量,但在前端开发过程中经常会遇到。当页面内容很多时,footer会在底部,但当页面内容很少时,如何使footer始终在底部咧?
1.HTML结构
我一般是把footer写在footer标签里面
<footer>
//footer相关代码
</footer>
2必要CSS样式
html,body {//保证内容不足时,撑开页面高度;
height:100%;
}
footer {//保证底部的宽度为100%;
width: 100%;
}
3,jQuery代码
先定义一个名为setFooter的函数,用来设置底部footer位置
/*设置底部footer位置*/
function setFooter() {
var body_height = $(document.body).height()//获取body的高度
var window_height = $(window).height()//获取浏览器可视区域的高度
var footer_height = $("footer").height()//获取footer的高度
if(body_height < window_height){
$("footer").css("position","absolute");
$("footer").css("bottom","0px");
$("footer").css("margin-top",-footer_height);//保证不遮盖上方内容
}else{
$("footer").css("position","relative");
};
}
然后分别在页面改变大小和加载时调用setFooter()方法,注意一定要放在load事件而不是ready事件中,因为ready事件只加载了DOM结构,图片之类的都还没加载,此时获取的body的高度是不准确的。
/*监听窗口大小改变*/
$(window).resize(function(){
/*设置底部footer位置*/
setFooter();
})
/*加载*/
$(window).load(function(){
/*设置底部页脚位置*/
setFooter();
});
这样就可以使Footer始终保持在页面底部了。