<!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

内容高度小于窗口高度时版权div固定在底部的更多相关文章

  1. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  2. jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  3. div高度自适应窗口高度布局

    给body和html都设置height:100%:然后子元素用百分比设置高度

  4. js中获取窗口高度的方法

    取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...

  5. CSS布局:让页底内容永远固定在底部

    我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...

  6. bootstrap div 固定

    div固定在顶部样式: .navbar-fixed-top div固定在底部样式 .navbar-fixed-bottom

  7. 动态获取div的高度 随着窗口变化而变化

    // 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...

  8. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. div高度随浏览器窗口高度变化；

    通过实际测试,按照网上的说法通过设置html,body{height: 100%:}, 然后让div以100%继承body的高度,这种做法是错误的,必须得上级有个设置固定的高度. 原生js代码(参照网 ...

随机推荐

  1. ros消息时间同步与回调

    转载自http://blog.csdn.net/zyh821351004/article/details/47758433 方式一: 全局变量形式  : TimeSynchronizer 步骤: 1. ...

  2. Javascript 常用

    第一步,实现百度输入法的页面布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. Oracle的完整练习，纯手工打字，可能有一两点错误。。。

    PS:所有的表来源于Oracle自带的SCOTT用户下的表,初学者应该都知道的.emp表的SMITH被我删除了没有rollback,所以可能结果有点小出入. 1.选择部门30中的所有员工: SELEC ...

  4. JavaScript的一点简介（注：本文诸多观点源于JavaScript高级程序设计，如有侵权，立即删除）

    JavaScript是一门最易让人误解的语言,该语言中精华与糟粕并存(可能比一般语言的这个比例要大一些):但“千淘万漉虽辛苦,吹尽黄沙始到金”,层层面纱下是易用灵活.优雅轻灵的内在.很久以前,Java ...

  5. Mysql联合查询UNION和UNION ALL的使用介绍

    UNION和UNION ALL的作用和语法 UNION 用于合并两个或多个 SELECT 语句的结果集,并消去表中任何重复行.UNION 内部的 SELECT 语句必须拥有相同数量的列,列也必须拥有相 ...

  6. hdu4753

    很简单的位模拟(bit-mask),可惜队友读题误以为很难,没有及时跟我交流,不然应该很早就可以出了. 很容易看出来,总共才16个点.24条边.用一个int类型数字就可以描述这个图了,按照16点的关系 ...

  7. JVM学习之Eclipse输出GC日志

    Java应用启动时,可以通过设置verbose参数来输出JVM的gc情况,命令如下:-verbose:gc或者-XX:+PrintGC在Eclipse中可以通过Run As|Run Configura ...

  8. HTTP POST和GET的区别[转]

    http://www.cppblog.com/woaidongmao/archive/2008/05/29/51476.aspx 1.HTTP 只有POST和GET 两种命令模式: 2.POST是被设 ...

  9. 动态include与静态include的区别

    搬一下以前写的 个人总结: 动态INCLUDE 用jsp:include动作实现 <jsp:include page="included.jsp" flush="t ...

  10. php curl函数实例

    <?php function login(){ $url = 'http://jspatch.qq.com/offline/check?qver=6.2.0.427&hver=0& ...