javascript - 各divを画面のサイズにする方法は？

Question

私が次のものを持っていると仮定します：

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

どうすればそんなにできるのか……。

これらの3つのdivは、どういうわけかそれぞれがブラウザveiwのサイズを取得します）ユーザーが下にスクロールしたときに1つの色しか表示されないように、ビューアのブラウザウィンドウと同じサイズを維持しますか？

Answer 1

CSSを使用して、height: 100%次のように設定します。

html, body {
    height: 100%;
}

div {
    height: 100%;
}

デモ

http://jsfiddle.net/wsraN/

色付きのデモ2

http://jsfiddle.net/KFuYM/

ノート

コメントで述べられているように、背景色を適用するためにクラスを使用します。2番目のデモで例を見ることができます：

div.orange {
    background: orange;
}

と：

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

Answer 2

廃止された html 属性ではなく、CSS を使用することをお勧めします。あなたの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>

これを行う方法はたくさんあります。私のコードは最も簡単なものの1つだと思います。