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

2024-07-11 08:21:44

字体：大中小

来源：转载

供稿：网友

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

　　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></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 全部选择提示：你可先修改部分代码，再按运行]

上一篇：动态加载外部css或js文件

下一篇：在IE流览器中正确显示PNG透明图片