当前位置： > 网页制作 > CSS教程 > 文章内容

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

http://www.itjxue.com 2015-08-06 00:13 来源:未知 点击次数:

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

　　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; }，垂直居中。 IT教学网

由于Win IE不支持{ display:table; }，因此，只能采取定位的方式实现。<!--[if IE]>内是针对ie的设定。 Webjx.Com

IT教学网

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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> IT教学网

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] Webjx.Com

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：CSS框架带来的效率提升

下一篇：CSS初学者应该保持的一种心态

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

(责任编辑：IT教学网)

相关CSS教程文章

阅读排行

专题教程

推荐CSS教程文章

最新更新CSS教程