上下定高 中间自适应_DivCSS布局实例：三行单列上下固定高度中间自适应

示例代码 [www.mb5u.com]

DivCSS布局实例：三行单列 上下固定高度 中间自适应

* {

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;

}

header

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

内容内容

footer