有如下的代码：
这样主框red就自动撑开了，适用于ff，ie。
还有一个问题，就是：给最外围div添加overflow:hidden
<!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>解决ie6 7 8 ff chrome div高度自动增加问题-www.jb200.com</title>
</head>
<body style="padding:0px; margin:0px; min-height:300px;">
<style>
.abc{ width:940px; min-height:60px;
max-height:none; border:1px solid #999; background-color:#060;}
.cde{width:940px;
max-height:none; border:1px solid #999; background-color:#060;}
.fgh{width:940px;
height:60px; max-height:none; border:1px solid #999; background-color:#060;}
</style>
<div class="abc">
<p><strong>
第三个层固定高度其他的高度自适应 min-height 和max-height 是ie 7 8 ff chrome支持的 ie6div高度自适应 用不着</strong></p>
<p>如果div里有float <br>那么<br>加入清除浮动 clear的div可以解决内容溢出问题<br>容脚本学堂_www.jb200.com容内<br>容脚本学堂_www.jb200.com内容内容
脚本学堂_www.jb200.com<br>脚本学堂_www.jb200.com<br>容脚本学堂_www.jb200.com容脚本学堂_www.jb200.com容内<br>容内容内容 内容内<br>容脚本学堂_www.jb200.com内容内容</p>
</div>
<div class="cde">
<br>
脚本学堂_www.jb200.com<br>脚本学堂_www.jb200.com<br>容脚本学堂_www.jb200.com容脚本学堂_www.jb200.com容内<br>容内 容脚本学堂_www.jb200.com<br>容脚本学堂_www.jb200.com内容内容
脚本学堂_www.jb200.com<br>脚本学堂_www.jb200.com<br>容脚本学堂_www.jb200.com容脚本学堂_www.jb200.com容内<br>容内 容脚本学堂_www.jb200.com<br>容脚本学堂_www.jb200.com内容内容
</div>
<div class="fgh"></div>
</body>
</html>
<html>
<head>
<style type="text/css">
<!--
.box1{ background-color:#F90; min-height:200px; width:125px; height:200px; float:left;}
.box2{ background-color:#0CF; min-height:200px; width:125px; height:200px; float:left;}
.box3{ background-color:#9C0; min-height:200px; width:125px; height:200px; float:left; height:auto;}
.box4{ background-color:#F9C; min-height:200px; width:125px; height:200px; float:left;}
[class].box4{height:auto;}
-->
</style></head>
<body>
<div class="box1">
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
<p>BOX1</p>
</div>
<div class="box2">
<p>BOX2</p>
</div>
<div class="box3">
<p>BOX3</p>
</div>
<div class="box4">
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
<p>BOX4</p>
</div>
</body>
</html>
之前遇到Div不自适应高度，解决方法为：
不过应用这个方法如果Div嵌套过多中间浮动过于复杂容易使页面乱掉。
更好的解决方法：
直接在外层想让其"自适应高度"的Div 添加以下属性：
此时会有一个奇怪的现象：
如果只添加"height:100%; "(设置高度100%)就IE下可以自适应高度而FireFox不行，如果只添加"overflow:auto; "(设置溢出自动)就
FireFox下可以自适应高度而IE不行，所以完美的解决办法就是"height:100%; overflow:auto;"两个属性同时添加进去就可以了。
另外，经常会遇到这类问题，就是：左边的DIV和右边的DIV高度不一样。一般左边是固定的高度，比如产品分类；但是右边的高度就会不确定了，，如果右边的高度高出了左边的2
倍、三倍、甚至更高呢？
解决方法：
<style type="text/css" media="screen">
<!--
#main {width:500px;_height:300px;min-height:300px; background:#aaffaa; border:1px solid #600; float:left;overflow:hidden;_overflow:visible;}
#sidebar {width:200px;background-color:#ff0000; float:left; border:1px solid #060; }
#content {width:200px; background:#0000ff; border:1px solid #006; float:left;}
.row{margin-bottom:-10000px;padding-bottom:10000px;}
-->
</style>
</head>
<body>
<div id="main">
<div id="sidebar" class="row">
<p>Layer - right<br />
right<br />
right<br />
right<br />
right<br />
right<br /> <br><br>66666Layer - right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br />
right<br /> <br><br>66666</p>
</div>
<div id="content" class="row">
Layer - right<br />
right<br />
right<br />
right<br />
right<br />
right<br /> <br><br>66666
</div>
</div>
</body>
有关div高度自适应的实现方法，就介绍这些吧，希望对大家有所帮助。