div自適應高度

2021-08-04 22:48:33 字數 694 閱讀 8665

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

我們在用div布局的時候經常會遇到這樣的一種情況:我們需要設定乙個div高度,當裡面的東西超過這個高度時,讓這個容器自動被撐開,也就是div自適應高度。當裡面的資訊很少時候,我們就設定它乙個最小的固定高度。

我們知道,在ie6中,如果子容器的高度超過父容器的時候,父容器會被子容器撐開,所以我們可以直接設定乙個height的高度值即可。但是在ie7和firefox就不行了,它不會自動撐開。

如果要設定div自適應高度,我們可以採用height:auto;這個屬性;不過這個屬性ie6又不支援了。是不是很頭痛?其實解決這個問題不難,而且方法也不少,這裡推薦一種:(假設我們需要控制的這個div最小高度是100px,超過時就讓裡面的資訊自動撐開):

html**

.div 

注釋:因為!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樣式就出來了,同時相容了ie6、ie7和firefox!

div高度自適應

盒模型的height的預設值為auto,它表示盒模型的高度由它所包裹的內容高度來決定,因此div不設定height的值就可以實現高度的自適應。然而在實際css布局實踐中,常常出現一些特殊的需求。div的高度初始為某一固定高度,然後隨著內容的增多高度自適應。css屬性中min height是專門來解決...

外層div自適應內層div高度

最近在做專案的時候,寫jsp頁面,在顯示一些資料時不知道資料的多少,這時候就需要外層div自適應內層div的高度。在網上找了些方法,也是本人現在用的解決方法,這裡只介紹一種,當然還有很多種解決方法。如 1 div id div 1 2 div id div 1 1 div 3 div id div ...

CSS實現div高度自適應

1 有時候,我們希望容器有乙個固定高度,但當其中的內容多的時候,又希望高度能夠自適應,也即容器在縱向能被撐開,且如果有背景,也能夠自適應。在一般情況下,使用min height即可解決。但是廣大網民的首選瀏覽器ie6並不支援min height。ie7,opera,火狐,谷歌沒有問題。所以採用以下寫...