javascript - div 占用屏幕总空间

Question

和其他页面一样，主div总是占据用户看到的整个屏幕，当他向下滚动时，他可以看到另一个div:example1。 , example2

无论您调整屏幕大小，主 div 将始终占据用户看到的总空间。

为了测试它，我尝试下面的代码:

<div style="background:yellow;  position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; float:left;">
    This is my Section!
</div>

有了他，我可以看到一个大的黄色背景，文本占据了我浏览器的整个区域。假设我想在此下方添加另一个 div，我该怎么做？可以使用 css 还是我需要 javascript？

Answer 1

您可以无需仅使用纯 CSS 的 javascript。

使用 vh 单位，您可以像这样在下一个容器上指定 margin-top :

#content { margin-top: 100vh;}

此方法的优点是它完全响应，无论您如何调整它的大小(高度或宽度)。

See it here