如何让 div 在浏览器中占据 100% 的视口高度

问题描述

我有一个 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 在有元素时不会 100% 占据视口在容器 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 仅填充视口高度的 100%，并且我希望能够使即使页面上有元素，高度也为视口的 100%。

编辑：

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

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

总结：

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

解决方法

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

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

我认为这是一种错误，但这就是它的方式 - 在大多数浏览器中，似乎。我很久以前发布了这个问题，它基本上涵盖了相同的问题：Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)

评论后添加/编辑：

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

请在 head 标签中使用以下元标签

<meta name="viewport" content="width=device-width,initial-scale=1">

<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    body {
      color: red;
      background: green;
      margin: 0;
      padding: 0;
    }
    
    #container {
      width: 100vw;
      height: 100vh;
      z-index: 1;
      background: purple;
    }
    
    p {
      font-size: 20pt;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <p>ksksks</p>
</body>

</html>

根据您的问题，您希望 div 占据空间而不是紫色背景，对吗？

CSS：

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

body {
  margin: 0px;
  
}

#innerDiv {
  height: 100vw;
  background-color: red;
  width: 100vw;

}

#innerDiv1 {
  height: 100%;
  background-color: blue;
  width: 100vw;
  
}

HTML：

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

<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>

您将背景紫色应用到 100vh 的高度，如果你想完全看到紫色，你只需在 body 标签中添加紫色而不是绿色，否则你想将 div 放在容器中。这里没有问题。你只是想调整你的代码

body {
  color: red;
  background: purple;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;

}

p {
  font-size: 20pt;
}

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

最简单的解决方案是利用viewport height(vh)和viewport width(vw)单位来设置块的高度和宽度。这个块/div 将填满浏览器窗口中的整个空间。这是一个例子。

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

确保您的 <head> 中有给定的视口元标记

<meta name="viewport" content="width=device-width,initial-scale=1.0">

这向浏览器提供了有关如何控制页面尺寸和缩放比例的说明。 width=device-width 部分设置页面的宽度以跟随设备的 screen-width（这将因设备而异）。 initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。如果缺少元标记，初始比例和缩放可能会出现异常。另外将您的 <p> 放在容器 div 中。这是工作演示。

我的代码：

HTML,body {
  margin: 0;
  padding: 0;
}

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

p {
  height: 100%;
  width: 100%;
  background-color: rgba(255,255,.8);
}

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

<div id="container">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

这只是一种解决方法，我通常将其用作全屏移动汉堡菜单。您必须小心，因为它会强制覆盖整个页面，如果页面上已经存在任何其他元素，它将隐藏所有元素。

.container {
    # it make the container always on the page regardless any element or window margin
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    height: 100vh;
    width: 100vw;
}

我已经用这些代码试过了，它似乎有效，您可以查看它们：

body {
  color: red;
  background: green;
  margin: 0;
  padding: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: purple;
}

p {
  font-size: 20pt;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <div id="container"></div>
  <p>ksksks</p>
</body>

</html>

似乎没有什么问题。

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

body {
  margin: 0px;
}

#innerDiv {
  height: 100px;
  background-color: red;
  width: 100vw;
}

#innerDiv1 {
  height: 100px;
  background-color: blue;
  width: 100vw;
}

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

<div id="innerDiv">Div #1</div>
<div id="innerDiv1">Div #2</div>

html viewport-units