DIV自适应屏幕高度

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DIVAutHheight.aspx.cs" Inherits="StudyWebApp.DIVAutHheight" %>

<!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 runat="server">
    <title>DIV Auto Height</title>
<style type="text/css">
*{ margin:0; padding:0;}

html,body{
 padding:0px!important;
 padding:100px 0px;
 width:100%;
 height:100%;
 overflow:hidden;
}

#header{
 position:absolute!important;position: relative;
 _top:-100px;
 width:100%;
 height:100px;
 background:#f00;
 text-align:center;
}
#middle{ 
 position: absolute!important;
 top:100px!important;
 height:auto!important; 
 position: relative;
 top:-100px; 
 height:100%;  
 bottom:100px;
 width:100%;
 background:#ffc;
 text-align:center;
 overflow: auto;
}
#footer{
 position:absolute;
 bottom:0;
 width:100%;
 height:100px;
 background:#ccc;
 line-height:100px;
 text-align:center;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="header">抬头sdfasdfasd</div>
    <div id="middle">
        1页中<br />
        2页中<br />
        3页中<br />
        4页中<br />
        5页中<br />
        6页中<br />
        7页中<br />
        8页中<br />
        9页中<br />
    </div>
    <div id="footer">页脚</div>
    </form>
</body>
</html>
posted on 2011-04-23 23:41 残荷斋阅读(6552) 评论(0) 收藏举报