關于height:100%的簡單了解

要想高度百分比起作用，一般來說，要滿足兩個條件：其一，父标簽有高度可尋，就是向上周遊父标簽要找到一個定值高度（body，html另外讨論），如果中途有個height為auto或是沒有設定height屬性，則高度百分比不起作用；其二，标簽本身的屬性，如果inline屬性的标簽，如果沒有浮動，zoom，或是絕對定位之類屬性是不支援百分比高度的，block或inline-block屬性可以說是高度百分比起作用的前提條件之一吧。

而這裡要講的是關于body和html的高度百分比顯示的。

預設狀态下，不是高度100%顯示的，不要看定義background屬性好像就是滿屏顯示的，此背景已非之背景。用下面這個一測便知。

body{background:#039; border:50px solid #C00;}
           

那麼是否支援height:100%呢？經過我的測試，IE6支援，Firefox浏覽器不支援。

要想讓Firefox浏覽器也支援的height:100%是簡單的，就是設定标簽height:100%，一旦設定了height:100%則無論哪個浏覽器下都支援height:100%了，而内部的容器也可以支援height:100%了。

前段時間看到百度的一道面試題，說什麼透明層無論滾動與否都滿屏顯示，其實就是對和标簽做一番手腳，兩者高度100%顯示，同時溢出隐藏（overflow:hidden），然後用一個

高度100%顯示，溢出滾動。而這個透明層就使用絕對定位且與這個 平級，高寬100%顯示，就可以使得無論怎麼滾動這個透明覆寫層都是滿屏顯示的。這其實也就解決IE6下浮動層固定定位的經典方法。