一个不错的CSS DIV格局，DIV高度自适应
日期：2014-05-17 浏览次数：20630 次
一个不错的CSS DIV布局，DIV高度自适应
http://www.cnblogs.com/devbar/archive/2009/04/22/1441386.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WiseInfo</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
}
html, body {
height:100%;
overflow: hidden;
}
html>body { /*-- for !IE6.0 --*/
width: auto;
height: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
body {
border:8px solid #ffff00;
background-color: #ffffff;
}
#mainDiv {
width: 100%;
height: 100%;
_padding-left:160px;
}
#rightDiv {
width: 100%;
height: 100%;
_padding:100px 0px;
}
#mainDiv>#rightDiv {
width:auto;
position:absolute;
left:160px;
right:0px;
}
#leftDiv {
width:156px;
height:100%;
background-color:#99FF33;
position:absolute;
top:0px;
left:0px;
}
#centerDiv {
width: 100%;
height: 100%;
background-color:#00CCFF;
}
#rightDiv>#centerDiv {
height:auto;
position:absolute;
top:100px;
bottom:100px;
}
#topDiv {
height:96px;
width:100%;
background-color:#9933FF;
position:absolute;
top:0px;
}
#bottomDiv {
height:96px;
width:100%;
background-color:#FF9900;
position:absolute;
bottom:0px;
_bottom:-1px; /*-- for IE6.0 --*/
}
-->
</style>
</head>
<body>
<div id="mainDiv">
<div id="leftDiv"></div>
<div id="rightDiv">
<div id="topDiv"></div>
<div id="centerDiv" style="overflow:auto;"> 阿飞撒旦发啊是发送方啊沙发
<h1 style="width:3000px; height:2000px; background-color:#F00;"></h1>
</div>
<div id="bottomDiv"></div>
</div>
</div>
</body>
</html>
http://www.cnblogs.com/devbar/archive/2009/04/22/1441386.html
1 楼
zhmx520
2010-06-18
确实不错，不过我自己用来为什么不灵光呢。。。![]()
2 楼
zhouyong0
2010-07-13
是很不错哦！firefox3 ie5 ie6 ie7 ie8 下面测试都没有问题，非常好
3 楼
zhouyong0
2010-07-13
里面的div能不能设置最小高度，因为高度缩的很小时有些排版就混乱了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
