使每个div大小视口

Question

我想使用CSS来使每个div的大小与屏幕大小相同，然后每当用户滚动时，下一个div就会捕捉到视图中。后者有一个JavaScript库，但是我不记得这个名字了。至于获取每个div的屏幕大小，我尝试了以下操作，但无济于事。

<div>Div Content</div>

div {
    width: 100%;
    height: 100%;
}

Answer 1

您可以使用vw and vh将元素设置为视口的大小：

div {
   width: 100vw;
   height: 100vh;
}

Answer 2

div是块元素，默认情况下是父元素的宽度的100％。至于高度，请改用100vh。

Answer 3

css3中有新的单位，可以更轻松地分配视口宽度和视口高度。

他们是大众，vh。

div{
 width:100vh;
 height:100vh;
}

Answer 4

如果您的div是身体的直接子代，那么如果每个父母都设置为相同，则height:100%可以从视口中计算出来。

为什么？ ：%需要来自父级的值才能计算和应用。

width在这里对于块元素不是必需的，如果添加了margin，border或padding，甚至会成为问题。

html,
body,
div {
    height: 100%;
}

<div>Div Content</div>
<div>Div Content</div>
<div>Div Content</div>