div 低于另一个 div，每个都具有 100% 的屏幕宽度和高度

Question

我做一个页面布局的网站。我需要每个 div 具有 100% 的宽度和高度。 Div1 没问题，但是如何在滚动后使 div2 和 div3 的屏幕高度达到 100%？ 100vh 更长。我需要不同的高度，所以我不能使用固定高度。（抱歉英语不好）

div1 {
       position: relative;
       background-color: #fff;
       border-radius: 12px;
       width: 100%;
       height: 100%; 
}

Answer 1

非常简单。 vw 视口宽度和 vh 视口高度

div {
       position: relative;
      
       border-radius: 12px;
       width: 100vw;
       height: 100vh; 
} 
#a1{
background-color:blue;
}
#a2{
background-color:green;
}
#a3{
background-color:red;
}

<div id='a1'>
</div>
<div id='a2'>
</div>
<div id='a3'>
</div>

div 低于另一个 div，每个都具有 100% 的屏幕宽度和高度

div below another div, each with 100% width and height of screen

html

css

sass

responsive-design