如何使 div 占据浏览器视口高度的 100%

Question

我有一个 div 标签，我意识到它没有像它应该的那样填充 100% 的高度。

我的代码：

#container {
  width: 100vw;
  height: 100vh;
  background: purple;
}

body {
  margin: 0px;
}

<div id="container"></div>

<div id="container"></div>

发生了什么？

好吧，如果我只有上面的这段代码片段，我当然会将 div 占据 100% 的视口！问题是我的页面上不仅有这个代码，我还有更多的东西，我在body标签里面插入了这个代码部分，在body标签里面的某个“地方”，也就是说，我插入了一些元素，并且这些元素有这个div后，但是不占，100%的视口观察它是怎么回事

结果在您的页面上的视觉效果如何？

我滚动了页面，但我的 div 仍然占据整个视口的 100%。我不正确吗？如果这应该发生，为什么不发生？

说明：伙计们，我发现了这个问题，但我不知道如何解决它，好吧，事情是这样的，当容器 div 下方或上方有元素时，div 不会占据 100% 的视口，看这个图像并查看：

我使用的代码实现了这一点：

我的代码 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 仅填充视口高度的 100%，而我希望能够使高度为 100%即使在页面上有元素的视口。

编辑：

好吧，显然我看到有很多答案，其中大多数都不起作用，或者正在解释错误或提出不能解决问题的答案，其他人建议使用 position fixed 这实际上解决了问题，但是我不想这样做，认为你有一个聊天，因为你希望它有一个滚动项目符号，它将占据整个视口而不是另一个 div 的聊天，明白吗？这个解决方案实际上解决了问题，但我不喜欢 jerry-rig。

我想知道一种更优雅的方法，例如我的 div 容器占据了 100% 的视口，但我不希望其他元素出现，我希望 div 容器与任何应该出现的元素重叠而我不不想滚动页面。

概括：

用几句话概括一切，div应该占据100%的视口，并确保body没有滚动并且页面到顶部，即不管用户在页面的哪个位置，我希望页面转到顶部并禁用滚动，最好没有 javascript，我不想写太多可以用 html 和 css 编写的 javascript :) 我将利用这个答案中的奖励添加这个并要求解决这个问题。

Answer 1

问题与以下事实有关：vh和vw单位没有考虑（添加的）滚动条宽度/高度只要页面不高于视口，就不会出现滚动条，并且 100vh 将恰好是视口的高度，一切都会按预期工作。

但是一旦下面或上面有更多内容，就会出现垂直滚动条： 现在 比窗口宽度减去垂直滚动条width: 100vw还要宽，所以会出现水平 滚动条，现在height: 100vh比窗口高度减去（水平）高滚动条。

我认为这是一种错误，但事实就是如此——在大多数浏览器中似乎都是如此。我很久以前就发布过这个问题，基本上涵盖了同样的问题： Problem using vwunitswhenaverticalscrollbarappears(full-widthelementsinWordPress)

评论后添加/编辑：

我想说，没有 100% 安全的解决方案。但在某种程度上有帮助的一件事是不要使用 for 100vw，width而是使用100%，它确实考虑了（垂直）滚动条。然而，width: 100%;无论如何， 是任何块元素的默认设置，因此您可以简单地删除设置width并仅使用height: 100vh，只要您没有任何特殊的宽度要求，它就可以工作（即具有精确的视口高度）。