<!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=gb2312" />
<title>DIV自适应底部</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
$(function(){
res();
});
window.onresize = res;
function res(){
var one = $(window).height();
var gao = $(".in").height();
if (one>=gao){
$(".end").css({'position':"absolute"})
}else{
$(".end").css({'position':"relative"})
}
}
</script>
<style type="text/css">
* {margin: 0px;padding: 0px;list-style-type: none;}
html.body {height: 100%;width: 100%;}
.top {background-color: #F00;height: 100px;width: 100%;}
.in {float: left;height: auto;width: 100%;background-color: #00F;color:#FFF;}
.end {background-color: #F00;width: 100%;left: 0px;bottom: 0px;float: left;height: 100px;}
</style>
</head>
<div class="top">top <span class="yi"></span> | <span class="er"></span></div>
<div class="in">
<p>说明：</p>
1、获取用户浏览器当前BODY高度<br />
2、判断标签 ”in“ 的高度是否大于 body 的高度<br />
2.1、当用户的浏览器窗口 BODY 高度大于等于标签”in“的时候！标签”end“的属性等于：position:"absolute"【绝对定位】<br />
2.2、当用用户浏览器 BODY 高度小于标签 ”in“的高度时！标签”end“的属性等于：position:"none”【取消绝对定位】<br />
<br /><p><strong>特别说明：在用户不刷新页面的情况下实现以上效果</strong></p>
<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
内容<br />
</div>
<div class="end">end</div>
</body>
</html>
DIV底部自适应
猜你喜欢
转载自duchengjiu.iteye.com/blog/1830614
今日推荐
周排行