jQueryで常に縦幅100%のレイヤーを作る

サンプルはこちら。

See the Pen ldCqh by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

こちらのサンプルウィンドウ表示だと分かりづらいので、こちらのリンクから別ウィンドウで開いていただいて、ブラウザのウィンドウサイズを適当に変えてみてください。水色のウィンドウが常にウィンドウ全体と同じサイズに変化します。

サイズの変更が行われていることが分かりやすいよう、CSS3のtransitionで変化時にアニメーションを付けています。

JavaScript

$(function () {

  $("#wrapper").css("height",$(window).outerHeight());

  $(window).resize(function(){
    $("#wrapper").css("height",$(window).outerHeight());
  });

});

まず3行目で、「#wrapper」のCSSのheightにウィンドウの高さを動的に取得しています。
これだけでもウィンドウの高さ100%のレイヤーになっているのですが、「#wrapper」には高さがピクセル値固定で入れられているため、ウィンドウサイズが縮められるとウィンドウの高さ以上になりスクロールが発生してしまいます。

そこで5行目に、「ウィンドウがリサイズされた時」に3行目と同じ処理を実行するよう記述しています。

このようにすることでウィンドウサイズがどのような状態でも常に高さ100%の状態を保持できます。