专栏首页Savalone's Blog内容高度小于窗口高度时版权 div 固定在底部

内容高度小于窗口高度时版权 div 固定在底部

网站建设中经常遇到文档内容高度小于窗口高度时底部版权 div 固定在底部的问题,纯 css div 底部不太好解决这个问题,这里使用 js 代码来对检测文档高度和窗口高度来实现。

//js 代码调用方法说明:lrFixFooter("div.footerwarp"); 传入 div 固定底部的类名或者 ID 名

在制作这个 js 的时候发现个 IE8 的 bug

$(document).height() 竟然比其他浏览器多出 4 像素,于是就有了这个 js 判断 if(doc.height()-4 <= $(window).height()) 里面做了个减去 4 的处理。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jq 判断是否为空,为空隐藏指定 div

    Savalone
  • 使用 Darkmode.js 为网站添加深色模式

    Darkmode.js 是由 Sandoche 开发的开源代码库,目前项目托管于 Github;用户可以通过轻量级的代码实现网站添加深色模式;除了默认切换方式,...

    Savalone
  • 屏蔽鼠标右键 js

    有时候客户让加代码不让别人偷他的图片,文章之类的,需要用一些 js 屏蔽鼠标动作。

    Savalone
  • Vue:Vue中操作DOM方法

    MrTreasure
  • HTML编码规范建议

    解释: 对于非 HTML 标签之间的缩进,比如 script 或 style 标签内容缩进,与 script 或 style 标签的缩进同级。 示例:

    Clearlove
  • 攻击性语言检测:比较分析(CS CL)

    在网络社区里,攻击性行为已经变得很普遍。个人在网络世界中利用匿名的优势,沉迷于他们在现实生活中可能不会考虑的攻击性交流。政府、在线社区、公司等都在投资防止社交媒...

    用户6853689
  • [编程题] 大数相加

    注意由于这两个已经超过了Number范围,因此不能用Number存,这里我们选择使用字符串存储。

    lucifer210
  • 更快的网络+成本更低的消息=>微服务=>函数=>边缘计算

    在德国柏林举办的microXchg 2017大会上,亚马逊公司技术专家Adrian Cockroft发表了一个前瞻性的演讲。Adrian Cockroft是Cl...

    静一
  • 替换文件中的敏感信息

    Long long time no see.『每日一坑』栏目又来啦! 今天我们来做一个现实中有可能会碰到的问题: 替换文件中的敏感信息 问题描述 假设我们有一份...

    Crossin先生
  • 编程新手:看懂很多示例,却依然写不好一个程序

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券