首页新闻手机家电数码电脑财经大模型直播

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

2009-07-10/14:46

软件频道

软件教程

CSS

基础教程

正文

CSS布局实例:上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。本文代码在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; }，因此，只能采取定位的方式实现。内是针对ie的设定。

以下是引用片段： <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中</title> <styletype="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:0auto; 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> <divid="box"> <divid="header">header</div> <divid="main"> <divid="wrap"> <divid="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> <divid="footer">footer</div> </div> </body> </html>