今天要实现的效果是,当页面内容不足以充满屏幕窗口时,把底部固定在屏幕最下面;而当页面内容比较多时使其在页面的底部显示。
1.body内容
<div>
正文内容
</div>
<div id="footer">
底部内容
</div>
2.js代码
$(function(){
//窗体改变大小事件
$(window).resize(function(){
//正文高度
var body_height = $(document.body).outerHeight(true);
//底部元素高度
var bottom_height = $("#footer").outerHeight(true);
//浏览器页面高度
var window_height = $(window).height();
//判断并调整底部元素的样式
if($("#footer").hasClass('page-bottom')){
//若包含有page-bottom类,就应用了position设置
//当position为absolute时,body高度不包含这个元素
//所以页面高度需要判断body和footer之和若小于浏览器窗口
//则移除样式,让footer自然跟随在正文后面
if(body_height + bottom_height >= window_height){
$("#footer").removeClass('page-bottom');
}
}else{
//若没有page-bottom类,body高度包含footer
//判断body高度小于浏览器时,则悬浮于底部
if(body_height < window_height){
$("#footer").addClass('page-bottom');
}
}
});
//页面加载时,模拟触发一下resize事件
$(window).trigger('resize');
});
3.最后还有一个css样式
.page-bottom{
position:absolute; /*或者fixed*/
bottom:0;
}