DIV底部自适应

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

 

你可能感兴趣的:(JavaScript)