CSS實現div高度自適應

2022-03-13 00:19:47 字數 992 閱讀 4745

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

height:auto!important;

height:200px;

min-height:200px;

2、很多朋友反映用上面的方法後,在有些時候依然無法解決容器無法撐開自適應的問題。那一定是有容器巢狀的情況下,而子容器又是浮動的。例如:

<

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

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

css中div高度自適應

高度的自適應 父div高度隨子div的高度改變而改變 1 如果父div不定義height 子div均為標準流的時候,父div的height隨內容的變化而變化,實現父div高度隨子div的高度改變而改變。style type text css aa bb ccstyle div id aa 父div ...

div自適應高度

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

div高度自適應

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