高度自适应_HTML

<!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=utf-8" />
<title>Height100%</title>
<style type="text/css">
* { padding:0px 0px; margin:0px 0px; }
body { background: url(body_bg.GIF) repeat; background-color:#CCCCCC; text-align:center; font-family:Verdana; font-size:12px; }
#container { background-color:#FFFFFF; width:1000px; margin:0px auto; }
#head { background-color:#00CC00; }
#head #headinner { height:80px; padding:10px 10px; }
#main { background-color:#ffffff; }
#main #maininner { padding:10px 10px; }
#main #maininner #content { border:1px solid #CCCCCC; height:200px; padding:10px 10px; }
#foot { background-color: #FF9900; }
#foot #footinner { padding:10px 10px; }
</style>
</head>
<body>
<div id="container">
<div id="head">
    <div id="headinner">head</div>
</div>
<div id="main">
    <div id="maininner">
      <div id="content">main</div>
    </div>
</div>
<div id="foot">
    <div id="footinner">foot</div>
</div>
</div>
<script type="text/javascript">//??CenFun.com
function autoHeight(){
var h_window=self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
var h_head=document.getElementById("head").scrollHeight;
var h_foot=document.getElementById("foot").scrollHeight;
var h_main=document.getElementById("maininner").scrollHeight;
if(h_window-h_head-h_foot>h_main){
   document.getElementById("main").style.height=(h_window-h_head-h_foot)+"px";
}else{
   document.getElementById("main").style.height=h_main+"px";
}
}
autoHeight(); //??CenFun.com
window.onresize=autoHeight;
</script>
</body>
</html>
posted @ 2011-04-18 10:51  清凉一夏  阅读(1102)  评论(0)    收藏  举报