#mainbody{
..
min-height:400px;*min-height:400px;height:auto;
*height:400px;}以上CSS在IE 6.0，FireFox下可以实现Div高度根据内容自动拉伸，IE6下当Div高度大于400px时，Div会自动拉伸。
但在IE7下却无法实，其原因就是*height:400px;在IE7下不在自动拉伸，而是变为固定高度，那么当Div内部嵌套内容高于400px时，就会被截断。
目前IE 7可以正确支持!important（FireFox同样也支持），故修改如下，其书写顺序以firefox的写在前面，IE7的写在中间，IE6的写在最后面。
#mainbody{
..
height:auto!important;
min-height:400px;*height:400px;}
Div即父容器不根据内容自适应高度，我们看下面的代码：
程序代码 <div id="main"> <div id="content"></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题。 一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 程序代码<div id="main"> <div id="content"></div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div> 二，增加一个容器，在代码中存在，但在视觉中不可见。 程序代码<div id="main"> <div id="content"></div> <div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div> </div> 三，增加一个BR并设置样式为clear:both。 程序代码<div id="main"> <div id="content"></div> <br style="clear:both;" /> </div>
CSS容器高度自动撑开技巧
现在的网页都流行CSS+DIV的风格，当需要在文章中插入一些图文时，往往采用浮动层来实现。浮动层确实很方便，但有些也会带一些困惑。比如在下面这段代码中，有两个容器，第一个容器内又包含一个浮动的层：
- <div class="container">
- <div class="float">
- 这是浮动的层
- </div>
- 这是一个容器
- </div>
- <div class="container">这是另一个容器</div>
相应的CSS样式如下：
- .container {
- width: 150px;
- background-color: #00FFFF;
- margin: 5px;
- padding: 5px;
- }
- .float {
- width: 50px;
- float: right;
- background-color: #FFFF00;
- margin: 5px;
- padding: 5px;
- }
这段代码在不同的浏览器中会有不同的表现，在大多数新版本的浏览器中，它会出现下面的效果：
也就是说，虽然浮动层位于第一个容器内，但第一个容器的高度显然不受浮动层的影响，浮动层会超出容器的高度范围。也许你会对这种效果感到十分困惑，但事实就是如此。对于这个问题，采用 clear:both 是很难解决的。这时就要使用一个技巧：给容器加上 overflow: hidden（也可以试试用auto）。即把容器CSS的样式修改如下：
- .container {
- width: 150px;
- background-color: #00FFFF;
- margin: 5px;
- padding: 5px;
- overflow: hidden;
- }
这时的效果将变成如下：
这个 overflow: hidden 似乎很难说得通，因为按常规理解，这个特性应该是把浮动层的超出部分隐去。但事实是，当不指定容器的高度时，overflow: hidden 会自动撑开容器的高度，以便使浮动层不发生溢出现象。