里面的div怎么撑开外面的div,让高度自适应

关于容器高度自适应的兼容性问题。

1.有些时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7,opera,火狐没有问题。所以采用以下写法可以解决兼容性：

代码如下:

height:auto!important;
height:200px;
min-height:200px;

 

2.很多朋友反映用上面的方法后，在有些时候依然无法解决容器无法撑开自适应的问题。那一定是有容器嵌套的情况下，而子容器又是浮动的。例如

<div class="fuqin"><ul><li>内容1</li><li>内容1</li></ul></div>

其中class为fuqin的div有浮动的li，当li比较多的时候，即便是div设置的是最小高度，也无法被撑开。

原因就在于作为子容器的li是浮动的即 。在这种情况下，即便是li的内容超过了div的高度，div也无法撑开。

解决方法如下：

在浮动的容器后面，父容器结束之前加入一个div，代码如下:

<div class="fuqin">
　　<ul>
　　　　<li>内容1</li>
　　　　<li>内容1</>
　　</ul>
　　<div class="clearfloat"></div>
</div>
.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}