使 DIV 覆盖整个页面，但不使用 CSS 位置 [重复]答案

【问题标题】：Make a DIV cover entire page, but WITHOUT using CSS position [duplicate]使 DIV 覆盖整个页面，但不使用 CSS 位置 [重复]
【发布时间】：2017-03-28 14:50:37
【问题描述】：

我想用红色的background-color 制作一个 div 来覆盖我的整个页面，但我不想使用 CSS position: absolute。这是我的 CSS 位置示例：

<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;"></div>

CSS 位置在大多数情况下都有效，但是我无法创建多个这些 div（由于top: 0 和left: 0，它们相互重叠或相互抵消）。当你向下滚动时，我希望你能看到更多的 div。

如果有一个纯 CSS 解决方案会很有帮助，但 JavaScript 和 HTML 也对我开放。只是没有 JQUERY。

【问题讨论】：

你做得对，你只需将下一个设置为 top: 100% 以使其低于第一个等。
之后，top: 200% 在 Chrome 中不起作用。
可能有什么我不明白的...如果你设置一个div覆盖所有页面，当然你可以只有一个...不是吗？
这些会成为您页面上的第一个元素吗？ height: 100vh; width: 100vw; 呢？ Like this
如果我坚持使用 px 而不是 % 在我的情况下也会有所帮助。我正在构建一个仅适用于特定屏幕尺寸的应用，而且我对 px 比对 % 更熟悉。

标签： javascript html css

【解决方案1】：

IE7 和 8 等旧版浏览器可以在不使用视觉高度和宽度单位的情况下得到支持，方法是使用单个绝对定位的容器，内部 div 继承高度和宽度属性值。

CSS

body {
   margin: 0px;  /* optional */
}
#box {
   position:absolute;
   height: 100%;
   min-width: 100%;
}
.page {
   padding: 5px; /* optional */
   height: inherit;
}

HTML

    <body>
    <div id="box">

    <div class="page" style="background-color: red">
         <div style="width:25em; background-color: gray">25em</div>
    </div>
    <div class="page" style="background-color: green">2</div>
    <div class="page" style="background-color: white">3</div>

    </div>
    </body>

更新：容器的 width 属性已被替换为 IE7 中引入的 min-width 属性，以修复丑陋的水平滚动问题。为内部 div 元素提供 width 已被删除，因为没有必要。

【讨论】：

在某些场景下可能有用，但 vw 和 vh 的想法更容易。

【解决方案2】：

如何使用视口高度和视口宽度？

我在this JSFiddle 中创建了一个示例。

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

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

.one {
    background-color: blue;
}

.two {
    background-color: green;
}

.three {
    background-color: yellow;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

【讨论】：

我对 vw 和 vh 的实际作用感到困惑......
vw 是视口宽度，vh 是视口高度。 100vh 转换为“视口高度的 100%” - 因此它始终占据窗口的整个高度，无论您如何缩放窗口或使用哪种设备。如您所料，您也可以使用50vh 表示窗口高度的 50%，依此类推。
谢谢，经过测试并且可以工作。现在我理解了这个 vw 和 vh 的概念，我可能会更多地使用它......
请务必在support tables 上为它拍个照。如果您计划支持 IE11 之前的 IE 版本，您可能需要一个后备。

【解决方案3】：

只需更改每个top: 的值。第一个是0，第二个是100%，第三个是200%，以此类推。这是一个工作示例：

<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0;background:red;"></div>

<div style="width: 100%; height: 100%; position: absolute; top: 100%; left: 0; background:blue;"></div>

<div style="width: 100%; height: 100%; position: absolute; top: 200%; left: 0; background:green;"></div>

【讨论】：

对我来说顶部：200% 不起作用...

【解决方案4】：

如果你想让 div 占据整个空间，请使用 vw 和 vh

因为单独制作 div height:100% 和 width:100% 是不行的

不使用视口单位

检查这个sn-p

div{
 width: 100%;
  height:100%;
  background:red;
   
}

html,body{
  height:100%;
   width:100%;
  }

&lt;div &gt;&lt;/div&gt;

但是让 html 和 body 具有高度和宽度是一个坏主意所以跳过它使用视口单元

用 viewport unist 检查这个

div {
  width: 100vw;
  height: 100vh;
  background: red;
}

&lt;div&gt;&lt;/div&gt;

希望对你有帮助

【讨论】：

这两个在我的浏览器中看起来完全一样，所以我会说将它设置为百分比效果很好，并且已经这样做了很多年
是的，很好..但是只是设置 div 占据 100% 的宽度和高度，你必须让整个身体有 100% 的宽度和高度，这不是一个好主意。首选方式是使用视口单位
所以您认为最好使用仅在最新浏览器中受支持且在几乎所有浏览器中存在大量问题的单元
@Geeky vh 和 vw 在所有现代浏览器以及 IE9、10 和 11 中都得到很好的支持。
@adeneo 我们仅在将 div 设置为整页高度的情况下讨论 vh 和 vw 。您提到的所有“问题”在这里都不是问题，即使是，也仅适用于非现代浏览器。