今天小编跟大家讲解下有关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; } 因此 只能采取定位的方式实现。<!--[if IE]>内是针对ie的设定。 以下为引用的内容： <!DOCTYPE html 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> <!--[if IE]> <style type="text/css"> #header, #footer { width:100%; z-index:3; position:absolute; } #footer { bottom:0; } #main { height:100%; z-index:1; position:relative; } #main #wrap { position:absolute; top:50%; width:100%; text-align:left; } #main #text { position:relative; width:100%; top:-50%; background:#ccc; } </style> <![endif]--> </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> <!DOCTYPE html 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><!--[if IE]><style type="text/css">#header,#footer {width:100%;z-index:3;position:absolute;}#footer {bottom:0;}#main {height:100%;z-index:1;position:relative;}#main #wrap {position:absolute;top:50%;width:100%;text-align:left;}#main #text {position:relative;width:100%;top:-50%;background:#ccc;}</style><![endif]--></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> [Ctrl A 全部选择 提示：你可先修改部分代码 再按运行]来源：爱蒂网
