将网页的一部分放入视口中

Question

我有一个包含两个div的网页：

+----------------+
|                |
+----------------+
|                |
+----------------+

当用户访问该页面时，我希望顶部div缩放到视口的宽度和高度，完全填充浏览器窗口。换句话说：用户应该看到所有的顶部div而不是顶部div。然后，用户应该能够向下滚动到第二个div。第二个div的高度各不相同。

我该如何做到这一点？

我更喜欢没有JavaScript的解决方案。

Answer 1

使用CSS：

 <div id="welcome">
 your content on screen 1
 </div>

<div id="projects">
 your content on screen 2
</div> 

 div#welcome {
height: 100vh;
background: black;
 }

div#projects {
height: 100vh;
background: yellow;
}

更多参考：here