DIV的高度自动拉伸（height属性）…

#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的风格，当需要在文章中插入一些图文时，往往采用浮动层来实现。浮动层确实很方便，但有些也会带一些困惑。比如在下面这段代码中，有两个容器，第一个容器内又包含一个浮动的层：

1. <div class="container">
2.     <div class="float">
3.          这是浮动的层
4.     </div>
5.      这是一个容器
6. </div>
7. <div class="container">这是另一个容器</div>

相应的CSS样式如下：

1. .container {
2.      width: 150px;
3.      background-color: #00FFFF;
4.      margin: 5px;
5.      padding: 5px;
6. }
7. .float {
8.      width: 50px;
9.      float: right;
10.      background-color: #FFFF00;
11.      margin: 5px;
12.      padding: 5px;
13. }

这段代码在不同的浏览器中会有不同的表现，在大多数新版本的浏览器中，它会出现下面的效果：

也就是说，虽然浮动层位于第一个容器内，但第一个容器的高度显然不受浮动层的影响，浮动层会超出容器的高度范围。也许你会对这种效果感到十分困惑，但事实就是如此。对于这个问题，采用 clear:both 是很难解决的。这时就要使用一个技巧：给容器加上 overflow: hidden（也可以试试用auto）。即把容器CSS的样式修改如下：

1. .container {
2.      width: 150px;
3.      background-color: #00FFFF;
4.      margin: 5px;
5.      padding: 5px;
6.      overflow: hidden;
7. }

这时的效果将变成如下：

这个 overflow: hidden 似乎很难说得通，因为按常规理解，这个特性应该是把浮动层的超出部分隐去。但事实是，当不指定容器的高度时，overflow: hidden 会自动撑开容器的高度，以便使浮动层不发生溢出现象。