CSS布局实例:上中下三行,中间自适应_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>