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

ttx9n · 发表于 2008-10-17 19:27:23

上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。　　firefox 2.0 / win ie 6/ win ie 7 /opera 8.5 cn/win safari 测试通过。　　对于非ie内核浏览器，通过设定display:table、display:table-row和display:table-cell来模拟表格的表现形
　　上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。
　　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; }，因此，只能采取定位的方式实现。
</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">

<head>

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

* {

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]>

#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="header">header</div>

</div>

<div id="footer">footer</div>

</div>

</body>

</html>

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

JosephSA · 发表于 2022-8-21 05:12:59

。。。。。。。。。。。。。。。

平平安安 · 发表于 2022-10-28 02:12:17

sdsadsadsadf

a971560 · 发表于 2022-11-22 11:31:55

下载来瞧瞧

4k0mp7m · 发表于 2023-3-29 22:00:15

你们谁看了弄洒了可能

Anthonylam · 发表于 2023-7-2 02:25:37

笑纳了老板

溪谷玉贤 · 发表于 2023-7-28 08:52:11

2222222222222222

5cf304mn2 · 发表于 2023-8-15 04:25:31

天天源码社区www.tiantianym.com

Anthonylam · 发表于 2023-9-1 19:33:38

的沙发水电费水电费

dm00ji1s · 发表于 2023-11-18 20:29:25

额头额定法国队是范德萨

账号		自动登录	找回密码
密码			立即注册

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