3不同百分比的屏幕尺寸比例

Question

我是新來的divs，需要創建一個網頁，不會滾動一個佔據屏幕60％的主要div，一個佔據屏幕底部的div 30％，並在每個div之間填充10％的頁腳。它不能滾動，必須用瀏覽器窗口進行縮放。有沒有人做過這個？我試過這樣做，第二個div永遠不會正確定位。

謝謝。

Answer 1

This should work

HTML

<div></div> 
<div></div> 
<div></div> 

CSS

html,body{ 
    height:100%; 
    width:100%; 
    padding:0; 
    margin:0; 
    overflow:hidden; 
} 
div:nth-child(1){ 
    height:60%; 
    background:red; 
} 
div:nth-child(2){ 
    height:30%; 
    background:yellow; 
} 
div:nth-child(3){ 
    height:10%; 
    background:blue; 
}