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

Question

这个问题在这里已有答案：

如何使div 100％高度的浏览器窗口 31答案

我想制作一个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。

Answer 1

使用视口高度和视口宽度怎么样？

我在这个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>

Answer 2

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

因为单独制作div高度：100％和宽度：100％不会这样做

不使用视口单元

检查这个片段

 div{ width: 100%; height:100%; background:red; } html,body{ height:100%; width:100%; }

 <div ></div>

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

用viewport unist检查这个

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

 <div></div>

希望能帮助到你

Answer 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>

Answer 4

通过使用内部div继承height和width属性值的单个绝对定位容器，可以支持IE7和8等较旧的浏览器， 而无需使用可视高度和宽度单位。

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是不必要的。

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

问题描述

4 个解决方案

解决方案1
3 已采纳 2016-11-14 21:03:39

解决方案2
1 2016-11-14 21:02:23

解决方案3
0 2016-11-14 21:04:11

解决方案4
0 2016-11-14 22:16:17

CSS

HTML

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

问题描述

4 个解决方案

解决方案1 3 已采纳 2016-11-14 21:03:39

解决方案2 1 2016-11-14 21:02:23

解决方案3 0 2016-11-14 21:04:11

解决方案4 0 2016-11-14 22:16:17

CSS

HTML

解决方案1
3 已采纳 2016-11-14 21:03:39

解决方案2
1 2016-11-14 21:02:23

解决方案3
0 2016-11-14 21:04:11

解决方案4
0 2016-11-14 22:16:17