CSS實現div高度自適應

一、有時候，咱們但願容器有一個固定高度，但當其中的內容多的時候，又但願高度可以自適應，也即容器在縱向能被撐開，且若是有背景，也可以自適應。在通常狀況下，使用min-height便可解決。可是廣大網民的首選瀏覽器ie6並不支持min-height。ie7，opera，火狐，谷歌沒有問題。因此採用如下寫法能夠解決兼容性：

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

二、不少朋友反映用上面的方法後，在有些時候依然沒法解決容器沒法撐開自適應的問題。那必定是有容器嵌套的狀況下，而子容器又是浮動的。例如：

<div class="test">
    <ul>
        <li>內容1</li>
        <li>內容1</li>
    </ul>
</div>        

其中class爲test的div有浮動的li，當li比較多的時候，即使是div設置的是最小高度min-height，也沒法被撐開。 緣由就在於做爲子容器的li是浮動的 。在這種狀況下，即使是li的內容超過了div的高度，div也沒法撐開。 

解決方法以下：

在浮動的容器後面，父容器結束以前加入一個div，代碼以下：

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

這樣就實現了div高度自適應。