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的设定。
以下是引用片段：
<!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>;
