區塊有關高度百分比不聽話?

區塊有關高度或垂直距離百分比不聽話?qq001

Q. 希望 section.page 看起來高度100%佔滿視窗,而上方 padding 保留 10%,那麼 #banner 上方就有10%的距離,
接著希望 #banner 的寬度佔視窗的 85%、高度佔視窗的 25%。

snap00803

結果:高度 % 一律無效!為什麼呢?
畫面上看到顏色的區域是 section.page 的 padding-top 部份,但是 10% 似乎是寬度的比例???

snap00805

因為 html 與 body 預設無高度,所以內容無法使用 % 相對上層的比例。
將html 與 body 設定 height:100%,那麼內容的高度可以使用 % 相對上層的比例。

snap00806

結果:min-height 的設定也無法讓下一層設定相對比例,所以 #banner 仍然無法呈現出高度。

snap00807

想讓高度以百分比例來設定的話,可以使用新單位 vw 相對視窗寬度的百分比例 、vh 相對視窗高度的百分比例。

snap00808

結果:

snap00809