<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文档内容高度小于窗口高度时底部版权始终在底部-懒人建站</title>
<meta name="description" content="网站建设中经常遇到文档内容高度小于窗口高度时底部版权始终在底部的问题，纯css不太好解决这个问题，这里使用js代码来对检测文档高度和窗口高度来实现" />
</head>
<body>
<div style="height:500px; background:#ddd;">
<p>网站建设中经常遇到文档内容高度小于窗口高度时底部版权始终在底部的问题，纯css不太好解决这个问题，这里使用js代码来对检测文档高度和窗口高度来实现。</p>
<p><a href="http://www.51xuediannao.com/">懒人建站</a>为您提供-基于<a href="http://www.51xuediannao.com/">jquery特效</a>，<a href="http://www.51xuediannao.com/jquery_tanchu/">jquery弹出层</a>效果，js特效代码大全，JS广告代码，<a href="http://www.51xuediannao.com/js/nav/">导航菜单代码</a>，下拉菜单代码和jquery焦点图片代码。</p>
<p>懒人建站致力于解放您的部分写代码时间，提高您的工作效率！</p>
</div>
<div class="footerwarp">底部版权始终位于底部</div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
lrFixFooter("div.footerwarp"); //调用方法：lrFixFooter("div.footerwarp"); 传入底部的类名或者ID名
function lrFixFooter(obj){
var footer = $(obj),doc = $(document);
function fixFooter(){
if(doc.height()-4 <= $(window).height()){
footer.css({
width:"100%",
position:"absolute",
left:0,
bottom:0
});
}else{
footer.css({
position:"static"
});
}
}
fixFooter();
$(window).on('resize.footer', function(){
fixFooter();
});
$(window).on('scroll.footer',function(){
fixFooter();
});
}
})
</script>
</body>
</html>
代码说明:
网站建设中经常遇到文档内容高度小于窗口高度时底部版权div固定在底部的问题，纯css div底部不太好解决这个问题，这里使用js代码来对检测文档高度和窗口高度来实现。
//js代码调用方法说明：lrFixFooter("div.footerwarp"); 传入div固定底部的类名或者ID名
在制作这个js的时候发现个IE8 的bug
$(document).height() 竟然比其他浏览器多出4像素，于是就有了这个js判断 if(doc.height()-4 <= $(window).height()) 里面做了个减去4 的处理。
本文链接：内容高度小于窗口高度时版权div固定在底部http://www.51xuediannao.com/js/jquery/702.html