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

<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;

}

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


7下无效和解决" />

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

.container
{

width: 150px;

background-color: #00FFFF;

margin: 5px;

padding: 5px;

overflow: hidden;

}

这时的效果将变成如下：


7下无效和解决" />

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