IE7 FF DIV高度不能自適應問題的解決方案

2021-06-16 08:04:31 字數 1258 閱讀 3441

先看這樣乙個例子:

transitional.dtd">

">

外層div高度無法自適應。

1、問題:執行這段**可以看到,在ie下一切正常,但在firefox或ie7下,父物件all沒有適應子物件sub的高。

2、解決方法:

例中,xhtml**:「外層div高度無法自適應。

」,其css為:「#all #sub 」。

由於子物件sub設定了浮動(float:left),而父物件all沒有設定浮動,所以才會出現這樣的問題。

(1)將父物件也設定浮動。即把「float:left;」加到「#all 」中。

(2)將子物件的浮動屬性去掉。即把「float:left;」從「#sub 」中刪除。

(3)在「外層div高度無法自適應。

」的後面加乙個空的塊級物件,並設定 「clear:both;」取消浮動。如「

」 。但此方法在ie中僅限於有兩個或兩個以上的浮動子物件時才生效,只有乙個浮動子物件,用此方法底下會多出10px的高度。

由方法(2)又想到了乙個新問題,如果類似論壇中,乙個話題分左右兩邊的布局,而且左右分別都有固定的寬度時就必須要用到浮動屬性。如:

左邊是使用者頭像

右邊是話題內容

...

這種情況下方法(2)和方法(3)就不適用了。因為方法(2)是將子物件的浮動屬性去掉,而去掉浮動屬性就不可能實現;方法(3)僅適用於有多個浮 動物件,但如果恰巧只有1條記錄呢?除非下面不在乎那10px。此時我向最適用的就是方法(1)了。

解決方法小結:

1、父元素也浮動 (沒有指定寬度的float應當伸縮包裝到浮動內容的寬度)

2、clear屬性

3、為父層設定 前者針對火狐ie7(overflow:auto 或hidden) 後者針對ie6(_height:1% 或he\ight:1%)

* html .clear

4、父元素設定高度寬度

5、針對 火狐

#d1:after

其他小技巧:

html也要設定100%     ,對後面的div可能會有影響

html,body

設定 div為絕對定位. 

style="width:500px; height:100%!important; background:#003333; position:absolute;"

./#/需要自動高度的地方

在ff下乙個自適應高度的簡單做法 加上

height: 100%;

overflow: auto;

IE與火狐div高度自適應

解決方法1 解決方法2 解決方法3 設定div需要三個引數 height 高度 min height 最小高度 只針對火狐,ie不識別該標籤 important 重要,提前 當該標籤出現在同一選擇器裡時,火狐優先執行,而ie預設執行最後一 個屬性 需要注意的是 在針對乙個需要定高度,同時又希望能高度...

IE8,11的iframe高度自適應

相容模式 function iframeheighttzinfo 下面的 和上方取物件相同,都是從ifm.document取高度 if ifm.contentdocument ifm.contentdocument.body.offsetheight else if ifm.document ifm...

iOS7下Cell高度自適應

注 該api乙個要注意的地方,傳進去的size高度必須是0,否則雖然計算回來的size高度是正確地,但賦值給frame後frame裡的字卻不會自動換行,多餘的字仍然以省略號出現。在uilabel裡操作時發現的。cell高度根據文字自適應的 折騰了半天都不對,最後發現是api中的字典引數不能為nil。...