页面自适应高度页尾悬浮底部(兼容ie6)

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-08-22 13:48:20　-　阅:　-　评:1　-　积分:0

昨晚快12点了，qq上一小伙伴突然找我解决问题来了。什么问题呢，实现一小功能：页面内容高度小于屏幕高度时，页尾悬浮在浏览器底部；当页面内容过多超过屏幕高度时，页尾清除掉悬浮。
当时洒家啪啪啪一串代码便出来了，今日做了下完善。让页面自适应屏幕高度，这样就避免了当前页面内容过少时，下方出现一片空白的现象，还是来看一效果图吧：页面自适应高度页尾悬浮底部(兼容ie6)

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面自适应高度页尾悬浮底部(兼容ie6)--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com,www.yilingsj.com">
<meta name="keywords" content="页面自适应高度,页尾悬浮,ie6 bug,div高度自适应,悬浮底部层,jquery特效代码">
<style type="text/css">
*{margin:0;padding:0}
html{_background:url(about:blank)}/*兼容ie6悬浮元素抖动*/
.header{height:100px;background-color:#ccc}
.content{height:auto;margin:10px auto;background-color:#666;}
.footer{height:100px;width:100%;background-color:#ccc}
.fixed{position:fixed;bottom:0;left:0;z-index:100000;_position:absolute;_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight));}
</style>
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
doc_h=$(document).height();/*整个页面的高度（包括非当前屏的内容高度）*/
win_h=$(window).height();/*浏览器窗口的高度*/
head_h=$('.header').height();/*头部高*/
cont_h=$('.content').height()+20;/*中间内容高+外边距20*/
foot_h=$('.footer').height();/*尾部高*/
num_h=head_h+cont_h+foot_h;/*页面高之和*/
/*alert("num_h:"+num_h+"h  :"+doc_h+"h2  :"+win_h);*/
if(win_h>num_h){
/*如果浏览器窗口的高度大于页面高之和时，先让中间主体自适应高度，然后给页尾添加悬浮*/
$('.content').css({height:win_h-20-foot_h-head_h});
$('.footer').addClass('fixed');
}else if(doc_h>win_h){/*如果整个页面高度大于浏览器窗口，则清除悬浮*/
$('.footer').removeClass('fixed');
}
});
</script>
</head>
<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>
</html>

这个是完美兼容ie6的哦，不存在ie6 bug什么的。这个只是一个外围框架，小伙伴在用时请修改与添加具体内容。来理下思路：首先要获取整个页面的高度(包括超出当前屏的所有内容高度)；然后再获取浏览器窗口的高度(这样做是为了照顾某些亲不全屏)同时还要获取头部、中间主体以及页尾的高度;最后进行高度判断，当头部、中间主体以及页尾的高度之和小于浏览器窗口高度时，就给让中间主体自适应高度且给页尾添加悬浮样式，当整个页面高度大于浏览器窗口高度时就让页尾清除悬浮样式。具体的在页面源码中也有注释说明的哈。

Demo/源码下载：

Demo演示页面页面自适应高度页尾悬浮底部(兼容ie6).zip

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2014-08-22/194.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！