DIV設定最小高度

2021-07-11 05:34:38 字數 808 閱讀 3123

本文和大家重點討論一下如何控制div最小高度又div自適高度問題,如果我們需要設定乙個div高度,當裡面的東西超過這個高度時,讓這個容器自動被撐開,也就是div自適應高度。當裡面的資訊很少時候,我們就設定它乙個最小的固定高度。

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

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

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

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

.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 高度 總結

如果將div 的height 設定為固定的畫素值,在不同解析度的顯示屏上,會看到 div 在瀏覽器上的高度不一致。可以以百分比的形式設定 div 的高度。注意,這個百分比是針對 div 的上一層標籤而言的,如果當前 div的上一層標籤的 height 為 100px 那麼當前標籤設定 hight 為...

div最小高度的2種寫法

1.第一種寫法 原理 在ie6中,使用css定義div的高度的時候經常遇到這個問題,就是當div的最小高度小於一定的值以後,就會發現,無論你怎麼設定最小高度,div的高度會固定在乙個值不再發生變動,這個問題很是煩人。這是因為在ie6中,系統預設的並非是div有乙個預設的高度,而是你沒有解決乙個隱藏的...

div最小高度的2種寫法

1.第一種寫法 原理 在ie6中,使用css定義div的高度的時候經常遇到這個問題,就是當div的最小高度小於一定的值以後,就會發現,無論你怎麼設定最小高度,div的高度會固定在乙個值不再發生變動,這個問題很是煩人。這是因為在ie6中,系統預設的並非是div有乙個預設的高度,而是你沒有解決乙個隱藏的...