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

【 tulaoshi.com - Web开发 】

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

　　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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中/titlestyle 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]--/headbodydiv id="box"div id="header"header/divdiv id="main"div id="wrap"div id="text"p内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/pp内容内容/p/div/div/divdiv id="footer"footer/div/div/body/html

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]