Javascript 如何使每个div与屏幕大小相同？

假设我具备以下条件：

<div class="a" background-color="orange">
</div>
<div class="a" background-color="blue">
</div>
<div class="a" background-color="red">
</div>

我怎样才能使它如此

---

这三个div都以某种方式获得了浏览器的大小（VIEW）保持了与浏览器窗口相同的大小，这样当用户向下滚动时，他们只能看到一种颜色？

使用CSS并设置高度：100%，如下所示：

html, body {
    height: 100%;
}

div {
    height: 100%;
}

演示

带颜色的演示2

注意

如注释中所述，使用类应用背景色。您可以在第二个演示中看到一个示例：

div.orange {
    background: orange;
}

与：

---

您可能希望使用CSS而不是html不推荐的属性。 您的css可能是：

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.boxes {  
width: 100%;
height: 100%;
margin: 0;
}

.orange {
background-color: orange;
}

.blue {
background-color: blue;
}

.red {
background-color: red;
}

而您的HTML：

<div class="boxes orange"></div>
<div class="boxes blue"></div>
<div class="boxes red"></div>

---

有很多方法可以做到这一点。我想说我的代码是最简单的。

类名和

背景色

不是属性。@RocketHazmat错误-在HTML5中，id和类名可以是任何字符。@Damascusi水平或垂直滚动哪个方向？你的div应该放在彼此相邻的位置，或者放在前一个下方？@jtheman:我已经纠正了，但是

background color=“

仍然是错误的。谷歌“html元素适合全屏显示”，它会立即弹出，而且这个问题div的副本是块级元素，因此

显示：块

是重复的，不必要的。同意，我不必要地假设这样的类也可以应用于内联元素。

<div class="boxes orange"></div>
<div class="boxes blue"></div>
<div class="boxes red"></div>