<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>CSS布局:上中下三栏自适应高度CSS布局</title>
<STYLEtype="text/css">
*{margin:0;padding:0;}
body,html{
margin:0;
padding:0!important;
padding:90px032px0;
width:100%;
height:100%;
overflow:hidden;
}
.header{
background:#C9F;
width:100%;
height:90px;
overflow:hidden;
position:absolute;
top:0;
width:100%;
text-align:center;
background-color:#FFCC00;
}
.content{
position:absolute!important;
position:relative;
top:90px!important;
top:0;
bottom:32px;
width:100%;
overflow:hidden;
height:auto!important;
height:100%;
left:-3px;
}
.main{
height:100%;
background:#66CCFF;
overflow-y:auto;
text-align:center;
}
.footer{
background:#9CF;
width:100%;
height:40px;
color:#e1efff;
line-height:32px;
letter-spacing:1px;
text-align:center;
clear:both;
position:absolute;
bottom:0;
left:0;
background-color:#FF6600;
}
</STYLE>
</head>
<body>
<!--代码开始-->
<divclass="header">
<br/>这里是顶部
</div>
<divclass="content">
<divclass="main">
<br/><br/>网页header和footer高度是固定的,中间的content高度自适应浏览器窗口高度代码,随着窗口的大小变动都是满屏的。
</div>
</div>
<divclass="footer">
这里是底部
</div>
<!--代码结束-->
</body>
</html>
|