javascript - 如何让每个 div 变成屏幕的大小？

Question

假设我有以下内容：

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

我怎么能做到这样......

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

Answer 1

使用 CSS 并设置height: 100%如下：

html, body {
    height: 100%;
}

div {
    height: 100%;
}

演示

http://jsfiddle.net/wsraN/

演示 2 与颜色

http://jsfiddle.net/KFuYM/

笔记

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

div.orange {
    background: orange;
}

和：

<div class="orange"></div>

Answer 2

您可能希望使用 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>

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