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; 
}