CSS布局實例:上中下三行,中間自適應

2024-07-11 08:21:44

字體：大中小

來源：轉載

供稿：網友

　　上中下三行布局，上下定高，中間欄自適應瀏覽器高度，且內容垂直居中。

　　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; }，因此，只能采取定位的方式實現。<!--[if ie]>內是針對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></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>

[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

上一篇：動態加載外部css或js文件

下一篇：在IE流覽器中正確顯示PNG透明圖片