上中下三行布局,上下定高,中間欄自適應瀏覽器高度,且內容垂直居中。
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的設定。
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運行]
新聞熱點
疑難解答