分析div自動適應瀏覽器的高度

2021-08-03 04:05:04 字數 867 閱讀 6078

前端人員之間有乙個普遍存在的問題,如何讓乙個div的高度自動延伸到瀏覽視窗100%的高度,在布局中,我們有時會用到高度自適應,例如,我們定義了乙個 div,並且希望它的高度為視窗高度的100% ,那麼我們該如何編寫**呢?用height:100%就可以了。但要注意的是,瀏覽器對css的解析方式有一點差異。我們需要弄清楚100% 到底是誰佔誰的100%,讓我給你另外一種方式來思考html,幾乎每乙個html檔案都有一組容器彼此包含的。因此,在我們的頁面裡面,首先我們有乙個容器,其次容器包含在裡,最後才是

容器包含在裡面。當我們往任何乙個容器裡面放置內容的時候,這個容器和包含此容器的父容器盒子都會自動延伸的,從而能容下這些新新增的內容。也就是說,當我們往

容器盒子新增文字內容的時候,這個div容器盒子是自動延伸的,包含這個div容器的父容器盒子(body與html)依次是自動延伸的。

當我們給

容器定義「height:100%」樣式時,我們現在做的就是告訴它讓其高度延伸到包含它的父容器的整個高度。這個div容器被包含在容器裡面,所以

就是body的整個高度。好了,body容器是如何延伸增長的那?它就像

的高度一樣,因為我們從來沒有告訴它如何增高的。所以當我們給

定義「height:100%」樣式的時候,我們僅僅告訴了它自己。

解決此問題,我需要告訴容器變的大一些兒,同時容器也會出現同樣的問題,它應該與一樣大。用百分比要設定高度時,需要明確父級物件的高度。要不然瀏覽器會使用預設值。所以,要是實現開始所說的布局,**應該這樣寫:

html ,body

;}

也就是讓div的父級物件的高度確定為視窗的100%。因為html 和body 的預設值在ie和ff下並不都是100%。這樣問題就可以解決了。

**:

div的自動適應高度(相容所有瀏覽器)

在平時做div css的開發中,經常會遇到,把乙個div的高度固定,然後,裡面在巢狀乙個div,但是裡面的div的內容增多的時候,可以把外面的div撐開,但同時又保證裡面的div沒有東西是,外面的div保持一定的高度。主要解決辦法是在外面的div使用min height這個屬性,來保證他的高度,這個...

Ext Grid 瀏覽器裡自適應寬度高度

測試環境 ie6 var wid document.body.offsetwidth 如果把body變為documentelement會稍微寬些 var hei document.documentelement.clientheight 在gridpanel時 width wid,height he...

讓div自適應瀏覽器視窗居中顯示

今天做 banner 時發現乙個問題,就是瀏覽器視窗水平拉伸時 banner 圖未能居中,所以網上找了些資料,自己寫了個小 demo html div class div1 div class div2 自適應瀏覽器水平垂直居中 div div css div1.div2原理就是,先用left 50...