html - cssを介して画面の高さを決定する正しい方法は何ですか？

Question

4つの色付きのdivがあるレイアウトが必要です。赤、青、緑、黄色、すべてがページスクロールの高さに等しいと言います。画面を下に移動すると、青が表示され、次に緑が表示され、ロード時に黄色が赤で表示されます。

http://jsfiddle.net/Bv6JU/1/ここにフィドルがあります。

Answer 1

jqueryで（おそらく純粋なjavascriptでも簡単に実行できますが、私はjquery-oholicです）...

<div class="screensize" style="background-color:red"></div>
<div class="screensize" style="background-color:blue"></div>
<div class="screensize" style="background-color:green"></div>
<div class="screensize" style="background-color:yellow"></div>
<script type="text/javascript">
$(function() {
  $(".screensize").css("height",$(window).height() + "px");
})
</script>

編集：ああ、そして私が言ったように、人々がウィンドウのサイズを変更するときにサイズを一定に保ちたい場合は、サイズ変更イベントをキャプチャして、divのサイズを再度変更します。したがって、この行を関数に追加します...

$(window).resize(function() {
  $(".screensize").css("height",$(window).height() + "px");
})