立即注册 登录
来草原网 返回首页

eagle的个人空间 http://laicaoyuan.com/?1 [收藏] [复制] [分享] [RSS]

日志

div 自适应屏高

已有 1097 次阅读2011-9-26 16:39 |个人分类:php编程

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

路过

鸡蛋

鲜花

握手

雷人

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 立即注册
验证问答 换一个 验证码 换一个