js实现高度自适应

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js实现的自适应高度</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
}
#body {
height:100%;
}
#header {
height:65px;
background:#CDCDCD;
}
#menu{
height:30px;
background:#999;
margin-top:0px;
}
#content {
margin-right:300px;
overflow:auto;
background:#FFFFCC;
}
#sidebar {
width:300px;
float:right;
background:green;
}
</style>
<script>
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
}
window.onload=window.onresize=function(){
var wh=windowHeight();
document.getElementById("content").style.height = document.getElementById("sidebar").style.height = (wh-document.getElementById("header").offsetHeight-document.getElementById("menu").offsetHeight)+"px";
}
</script>
</head>

<body>
<div id="body" class="clear">
<div id="header">头部</div>
<div id="menu">中部</div>
<div id="sidebar" style="height: 547px; ">
</div>
<div id="content" style="height: 547px; ">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script src="./js实现的自适应高度_files/ga.js" type="text/javascript">
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3448069-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>

你可能感兴趣的:(高度自适应)