CSS布局实例:上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。本文代码在firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形式。
最外层#box { display:table; }，高度100%，其子层#header/#main/#footer为{ display:table-row; }，因此可以模拟表格的行效果，上下定高，则中间不定高的层自适应高度。
#wrap层为{ display:table-cell; }模拟单元格，因此可以设定{ vertical-align:middle; }，垂直居中。
由于Win IE不支持{ display:table; }，因此，只能采取定位的方式实现。内是针对ie的设定。
| 以下是引用片段： <!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>上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中</title> <style;type="text/css"> *;{; margin:0 padding:0 }; html,; body,; #box;{; height:100% font:small/1.5;"宋体",;serif }; body;{; text-align:center }; #box;{; text-align:left background:#666 display:table width:80% margin:0;auto position:relative }; #box;>;div;{; display:table-row }; #header,; #footer;{; background:#fcc height:50px }; #main;{; background:#ccf }; #main;#wrap;{; display:table-cell background:#ffc vertical-align:middle }; #text;{; text-align:center }; </style> <!--[if;IE]> <style;type="text/css"> #header,; #footer;{; width:100% z-index:3 position:absolute }; #footer;{; bottom:0 }; #main;{; height:100% z-index:1 position:relative }; #main;#wrap;{; position:absolute top:50% width:100% text-align:left }; #main;#text;{; position:relative width:100% top:-50% background:#ccc }; </style> <![endif]--> </head> <body> <div;id="box"> <div;id="header">header</div> <div;id="main"> <div;id="wrap"> <div;id="text"> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> <p>内容内容</p> </div> </div> </div> <div;id="footer">footer</div> </div> </body> </html>; |
