繁体中文
设为首页
加入收藏
当前位置:网站制作首页 >> CSS教程 >> CSS布局实例:上中下三行,中间自适应

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

2006-11-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:  上中下三行布局,上下定高,中间栏自适应浏览器高度,且内容垂直居中。   firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。   对于非ie内核浏览器,通过设定display:table、displ...

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

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

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

责任编辑:admin
相关文章