DIV默認高度且自適應高度

轉：

本文和你們重點討論一下如何控制DIV最小高度又DIV自適高度問題，若是咱們須要設置一個div高度，當裏面的東西超過這個高度時，讓這個容器自動被撐開，也就是DIV自適應高度。當裏面的信息不多時候，咱們就設置它一個最小的固定高度。

如何控制DIV最小高度又DIV自適高度

咱們在用div佈局的時候常常會遇到這樣的一種狀況：咱們須要設置一個DIV高度，當裏面的東西超過這個高度時，讓這個容器自動被撐開，也就是DIV自適應高度。當裏面的信息不多時候，咱們就設置它一個最小的固定高度。

咱們知道，在IE6中，若是子容器的高度超過父容器的時候，父容器會被子容器撐開，因此咱們能夠直接設置一個height的高度值便可。可是在IE7和firefox就不行了，它不會自動撐開。

若是要設置DIV自適應高度，咱們能夠採用height:auto;這個屬性；不過這個屬性IE6又不支持了。是否是很頭痛？其實解決這個問題不難，並且方法也很多，這裏推薦一種：(假設咱們須要控制的這個DIV最小高度是100px，超過期就讓裏面的信息自動撐開)：

Html代碼

1. .div{  

    

2.  

    

    

    

   height:auto!important;  

    

3.  

    

    

    

   height:100px;  

    

4.  

    

    

    

   min-height:100px;  

    

5. } 

    

.div{ height:auto!important; height:100px; min-height:100px; }

 

註釋：由於!important在IE7和Firefox均可以讀到，並且權重高於後面的height:100px；因此當在IE7和Firefox顯示的時候，就會用了前面的height:auto!important;而IE6識別不了!important，auto對它也無論用，所以會應用了後面的height:100px的樣式；而min-height:100px表示DIV最小高度爲100px；此屬性在IE7和firefox均可以識別。

這樣一個完美的便可以設置DIV最小高度，又能夠DIV自適應高度的css樣式就出來了，同時兼容了IE六、IE7和firefox！