上下定高 中间自适应_CSS布局实例:上中下三行,中间自适应

CSS布局实例:上中下三行,中间自适应

互联网   发布时间：2008-10-17 19:27:23   作者：佚名   我要评论

上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。

firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。

对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形

上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。

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; }，因此，只能采取定位的方式实现。

header

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

footer