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>

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

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

2 个答案: