我有一个div标签，但我发现它没有像应该的那样填满100%的高度。
我的代码：
#container {
width: 100vw;
height: 100vh;
background: purple;
}
body {
margin: 0px;
}
<div id="container"></div><div id="container"></div>发生了什么？
好吧，如果我只有上面那段代码片段，将div放置在整个视口中肯定是100％的！问题是，我的页面不只有这个代码，我有更多的东西，并且我将此代码部分插入了body标签内的某个“位置”，也就是说，在这个div之前我插入了一些元素，但它并没有占据整个视口，请看如下：
在你的页面上呈现出来的结果是怎样的？
我滚动了页面，但是我的div仍然无法占据整个视口。难道我不正确吗？如果这应该发生，为什么没有发生？
解释:伙计们，我发现了问题，但是我不知道如何解决，好吧，事情是这样的，当容器div上方或下方有元素时，该div不会占据整个视口，看看这张图片：
造成这种情况的代码：
我的HTML代码：
body {
color: red;
background: green;
margin: 0;
padding: 0;
}
#container {
width: 100vw;
height: 100vh;
z-index: 1;
background: purple;
}
p {
font-size: 20pt;
}<div id="container"></div>
<p>ksksks</p>编辑：
显然，我看到了许多答案，其中大部分都不起作用或解释错误或提供无法解决问题的答案，其他人建议使用固定位置来解决问题，但是我不想这样做，认为您有一个聊天，因为您希望它具有滚动弹幕，它将成为占据整个视口的聊天，而不是另一个div，明白吗？ 这种解决方案确实解决了问题，但我不喜欢“拼凑”的方法。
我想知道更优雅的解决方法，例如，我的div容器占据了视口的100％，但是我不希望出现其他元素，我希望div容器重叠任何应该出现的元素，并且我不想滚动页面。
总结：
简而言之，div应占据视口的100％，确保body没有滚动并且页面返回顶部，即使用户在页面上的任何位置，我也希望页面返回顶部并禁用滚动，最好不要使用JavaScript，如果可能的话，请在html和css中编写，我将利用此答案中的奖励补充这一点，并要求解决此问题的解决方案。