Css 3个不同比例屏幕大小的div

我是个新手，需要创建一个不滚动的网页，其中主div占屏幕的60%，下方div占30%，页脚占10%，每个div之间没有空格。它不能滚动，必须随浏览器窗口缩放。有人这样做过吗？我试过这样做，但第二组永远无法正确定位

谢谢。

HTML

HTML

HTML

HTML

---

看看（很多）关于固定页眉和页脚的问题。你的问题似乎是这个问题的一个变体。简短回答：如果不编写数学脚本，你可能无法完成。元素之间有

边距
而不是
填充
@isherwood你在做什么？那很容易，你说得对。我在考虑固定高度的页眉/页脚方案。看看（很多）关于固定页眉和页脚的问题。你的问题似乎是这个问题的一个变体。简短回答：如果不编写数学脚本，你可能无法完成。元素之间有
边距
而不是
填充
@isherwood你在做什么？那很容易，你说得对。我在考虑固定高度的页眉/页脚方案。看看（很多）关于固定页眉和页脚的问题。你的问题似乎是这个问题的一个变体。简短回答：如果不编写数学脚本，你可能无法完成。元素之间有
边距
而不是
填充
@isherwood你在做什么？那很容易，你说得对。我在考虑固定高度的页眉/页脚方案。看看（很多）关于固定页眉和页脚的问题。你的问题似乎是这个问题的一个变体。简短回答：如果不编写数学脚本，你可能无法完成。元素之间有
边距
而不是
填充
@isherwood你在做什么？那很容易，你说得对。我在考虑固定高度的页眉/页脚方案。看起来这正是我要找的。我试试看。看来这正是我要找的。我试试看。看来这正是我要找的。我试试看。看来这正是我要找的。我试试看。
<div></div>
<div></div>
<div></div>

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