网页代码:
<!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=gb2312" /> <title>CSS布局:上中下三栏自适应高度CSS布局</title> <STYLE type="text/css"> *{margin:0;padding:0;} body, html { margin: 0; padding:0 !important; padding:90px 0 32px 0; 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> <!-- 代码 开始 --> <div class="header"> <br/> 这里是顶部 </div> <div class="content"> <div class="main"> <br /><br /> 网页header和footer高度是固定的,中间的content高度自适应浏览器窗口高度代码,随着窗口的大小变动都是满屏的。 </div> </div> <div class="footer"> 这里是底部 </div> <!-- 代码 结束 --> </body> </html>
效果截图
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-11-08 02:35:07