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>上中下三行布局,上下定高,中間欄自適應瀏覽器高度,且內容垂直置中 www.cxybl.com</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> |