用div填充初始屏幕，然后正常滚动

Question

我正在尝试构建一个具有初始“目标网页”外观的网站，然后您可以向下滚动以查看其余内容。

我可以轻松创建一个适合我正在使用的设备屏幕的div，但是如何为不同屏幕尺寸的其他设备编码呢？

我尝试过使用'100％'当然最初有效，但滚动时会继续填充屏幕。我已经尝试定义一个特定的宽高比，但是，这只适用于我正在处理的屏幕。

要清楚，我希望div或img在用户首次登陆时填充屏幕，然后当用户滚动div / img时应该向上移动页面的其余部分。

我想只使用HTML或CSS来实现这一目标。

提前感谢任何提示！

Answer 1

您可以在第一个vw上使用vh和<div>来填充视口。您可以将其用作参考：https://developer.mozilla.org/en/docs/Web/CSS/length

Answer 2

这就是诀窍：

.full-page-container {
    width: 100vw;
    height: 100vh;
}

vw和vh单位表示视口大小的百分比。因此100vh将意味着视口高度的100％，并且不会受到滚动的影响。