jQuery基礎講座：ウィンドウサイズを取得してブラウザ100%のぴったりHeightを指定する！

jQuery基礎講座[第３回]

どーも＠PNRAです！
忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。

今回はウェブデザインの初歩でよく手間取るウィンドウサイズいっぱいにコンテンツを表示するための高さを取得する方法です。「コンテンツ量の少ないページにできる下部の空白をどうにかしたい…」や「ファーストビューに画面いっぱいの画像を配したい」なんてご要望を一気に解決しちゃいます！
CSSでもできますが、jQueryで取得した方が手軽で応用が効くのでTipsをご紹介します。

PNRA 404 error page

上記イメージは現在における弊社の404 errorページです。デバイスが変わってもぴったり背景が高さに合っているのが分かるかと思います。

ブラウザ100%のぴったりHeightの取得方法

下記の<script>~</script>を<header>~</header>内に記載します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

//開いた画面の高さを取得

var WindowHeight = $(window).height(); //WindowHeightは変数のため任意の名前をつける

$(function(){

  if(WindowHeight > 320){ //開いた画面が320px以上なら実行

    //body要素に高さを書き込む

    $('body').css('height',WindowHeight+'px');

  }

});

</script>

上記では、body要素の高さをwindowサイズとしましたが、要素は自由に設定できるので、高さをつけたい要素（div・section・article・etc…）をbody要素部分と書き換えてあげればOKです。
ちなみに上記のif構文で条件を320px以上にしているのは最も小さいと思われるスマートフォンのウィンドウサイズがBlackBerryの横幅320pxだったからです。

今日もとっても簡単でしたね♡
それではまた次回( ´•౪•`)

Siyabonga ekufundeni kwakho.(訳：最後まで読んでくれてありがとう。 / 注：ズールー語)