深圳狼图视觉设计's Map

发表于:2009/12/30 浏览:309 作者:龙华网站建设极度无极 来源:极度无极www.web0739.com

关键字:

描述:关于上中下三栏自适应100%高度

这几天看很多朋友问道这方面的问题,于是着手解决一下,刚刚自己做了个示例,
测试了通过了IE5/IE5.5/IE6/FF1.5/OPERA 8/,没有采用IE的 Quirks 模式:

代码:
<!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" /> <style type="text/css"> *{ margin:0; padding:0; } html{ padding:0 !important; padding:100px 0; width:100%; height:100%; overflow:hidden; } body{ padding:100px 0; padding:/**/0; height:100%; overflow: hidden; } #header{ position:absolute; top:0; width:100%; height:100px; background:#ccc; line-height:100px; text-align:center; } #middle{ position: absolute!important; position: relative; top:100px!important; top:0; bottom:100px; width:100%; height:auto!important; height: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> <title>自适应100%高度</title> </head> <body> <div id="header">页首</div> <div id="middle"> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> 页中<br /> </div> <div id="footer">页脚</div> </body> </html>

 


深圳狼图设计 版权所有