CSS中布局div高度自適應的方法

2021-04-12 22:44:13 字數 567 閱讀 4470

目前收集了一種方法,在實際應用中證實有效果,使用時注意理解下面的分析.

#left 

**已經到了不能再簡單的地步,對#left物件設定了height:100%;,然而也能夠看見,同時設定了html與body的height:100%;,而這個就是高度自適應問題的關鍵所在。

分析:乙個物件高度是否可以使用百分比顯示,取決於物件的父級物件,#left在頁面中直接旋轉在body之中,因此它的父級是body,而瀏覽器預設狀態下,是沒有給body乙個高度屬性的,因此當我們直接設定#left為height:100%;時,不會產生任何效果,而當我們給body設定了100%之後,它的子級物件#left的height:100%;便發生作用了,這便是瀏覽器解析規則引發的高度自適應問題。而**中除了給body應用之外,還給html物件也應用相同的樣式設計,這樣做的好處是使ie與firefox瀏覽器都能夠實現高度自適應,而body卻不是。另外,firefox中的html標籤不是100%高度,因此給兩個標籤都定義為height:100%;以保證兩個瀏覽器下均能夠正常顯示。   

**自:http://www.84design.com/article.asp?id=179

css中div高度自適應

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

CSS實現div高度自適應

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

div自適應高度

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