您现在的位置是：网站首页> 编程资料编程资料

CSS布局实例:上中下三行,中间自适应_CSS布局实例_CSS_网页制作_

2021-09-09 770人已围观

简介　　上中下三行布局，上下定高，中间栏自适应浏览器高度，且内容垂直居中。　　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; }，因此，只能采取定位的方式实现。

内容内容

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

上一篇：动态加载外部css或js文件_CSS教程_CSS_网页制作_

下一篇：浏览器Quirksmode模式与CSSCompat模式_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS布局实例:上中下三行,中间自适应_CSS布局实例_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢