内容高度小于窗口高度时版权div固定在底部
<!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固定在底部的更多相关文章
- jquery获取文档高度和窗口高度的例子
jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- jquery获取文档高度和窗口高度汇总
jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...
- div高度自适应窗口高度布局
给body和html都设置height:100%:然后子元素用百分比设置高度
- js中获取窗口高度的方法
取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...
- CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...
- bootstrap div 固定
div固定在顶部样式: .navbar-fixed-top div固定在底部样式 .navbar-fixed-bottom
- 动态获取div的高度 随着窗口变化而变化
// 1.jq法 <script> var winHeight = $(window).height(); $("#show").css("height&qu ...
- CSS布局：div高度随窗口变化而变化(BUG会有滚动条)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div高度随浏览器窗口高度变化；
通过实际测试,按照网上的说法通过设置html,body{height: 100%:}, 然后让div以100%继承body的高度,这种做法是错误的,必须得上级有个设置固定的高度. 原生js代码(参照网 ...
随机推荐
- GitHub上搭建Hexo化的博客
遇过的坑: 使用GitBash安装Hexo(npm的环境变量配置)注意 安装完成后添加Path环境变量,使npm命令生效.新版已经会自动配置Path 1 ;C:\Program Files\nodej ...
- aix lvm_lv_vg
Aix扩展文件系统,添加新硬盘 Cfgmgr 重新扫描新硬盘 Lspv Chdev –l hdisk3 –a pv=yes Extendvg rootvg hdisk3 note 上面的报错解决 Sm ...
- 如何交换a和b两个整数的值，不用额外空间
这个题貌似完全颠覆一般的Logic:交换两个整数需要一个额外的空间用于保存: t = b; b = a; a = t; 粗看上去似乎没有办法,但是仔细想一下,既然不能用额外的空间,那么能用的方法就只 ...
- where can I find source of com.android.internal.R.styleable.AlertDialog_multiChoiceItemLayout?
I want to modify Alert dialog multi select layout. For my program I want two line multi-select item. ...
- Maven命令行创建web项目，并部署到jobss当中(解决No plugin found for prefix 'jboss-as' in the current project and in the plugin groups [org.apache.maven.plugins,问题)
首件创建项目:此处可参照:http://maven.apache.org/guides/mini/guide-webapp.html mvn archetype:generate -DgroupId= ...
- iOS极光推送的基本使用
昨天花了一下午的时间研究了下极光推送,也前也是没做过,不知道从何下手!才开始的时候一看官方的SDK感觉好难,不过经过一系列的捣鼓之后,手机收到了推送信息,感觉其实并没有那么难! 1.配置开发证书(得有 ...
- css 中的若干心得
css布局中定位机制主要是普通的流,也就是说按照HTML文本的顺序在窗口上从上到下.从左到右去显示,遇见块级元素就换行显示.为了更进一步的控制,我可以使用相对定位.绝对定位.固定定位以及浮动. 相对定 ...
- statistics specify some columns count
# -k1 follow the first column nr
- nginx upstream setting
upstream proxy_1 { server 127.0.0.1:8080; #连接到上游服务器的最大并发空闲keepalive长连接数(默认是未设置,建议与Tomcat Connector中的 ...
- NodeJS + express访问html、css、JS等静态资源文件
原先做前端开发时都是用XAMPP或LAMP,把HTML.CSS.JS等前端资源放到htdocs下,测试自己的前端代码,但有些不方便的地方是,在调用Ajax请求后无法模拟请求返回的数据,最近学了点Nod ...