【jQuery】ブラウザの高さを取得して要素のheightに設定する

こんにちは、Ryohei（@ityryohei）です！

本記事では、例としてファーストビューの要素をブラウザの高さいっぱいに表示する方法をご紹介しています。

以下デモの表示となります。

Demo

ファーストビューの要素をブラウザの高さいっぱいに表示する際、ブラウザの高さを取得して要素に設定する処理が必要になります。

以下で詳しく説明していますので、良ければご覧ください！

要素の高さを設定／取得する

読み込み時、リサイズ完了時に取得したウィンドウサイズに応じて処理を実行する

ブラウザの高さを取得して要素に設定する

以下ソースになります。

HTML

HTMLは良くある記述になります。背景画像はCSSでidのmainVisualに設定しています。

<main>
  <section id="mainVisual">
    <h1>Main Visual</h1>
  </section>
  <section id="mainContents">
    <h1>Main Contents</h1>
  </section>
</main>
<footer>
</footer>

CSS

デモで背景に表示している画像はCSSのbackground-imageで設定しています。

background-sizeにcoverを設定することで、縦横比を維持したまま要素のサイズに合わせて拡大、縮小してくれます。画像の表示が粗くなってしまうこともありますが、レスポンシブやウィンドウサイズが大きい場合にも対応できますので、おすすめです。

body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0;
}
p {
  margin: 20px 0 0 0;
}
#mainVisual {
  position: relative;
  background: #555;
  overflow: hidden;
  background-image: url( images/sample013.jpg );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#mainVisual h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 80px;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  font-size: 32px;
  font-weight: bolder;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
}
#mainContents {
  display: block;
  width: 92%;
  height: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 4%;
  background: #fff;
}
#mainContents h1 {
  font-size: 32px;
  text-align: center;
}
footer {
  height: 300px;
  background: #000;
}

JS

スクリプトはブラウザの高さの取得と、ウィンドウがリサイズされた際の処理を記述しています。

ウィンドウの幅768px以下の場合は高さを400に固定しています。

$(function() {

  var checkResize;

  $(window).on('load resize', function() {
   clearTimeout( checkResize );
   checkResize = setTimeout( resizing, 100 );
  });

  function resizing() {

   var w = $(window).width();
   var h = $(window).height();
   var $elem = $('#mainVisual');

   if( w > 768 ) {
     $elem.height(h);
   } else {
     $elem.height('400');
   }
  }

});

以上、ブラウザの高さを取得して要素のheigitに設定する方法のご紹介でした！