jQueryを使って要素の高さをブラウザの高さにぴったり合わせる方法

jQueryを使って、要素の高さをブラウザの高さに合わせる方法をご紹介いたします。

例えば、メインビジュアルを画面いっぱいに表示したい時などに活用できます。CSSの指定だけでは思ったような表示にならない場合に参考にしていただければと思います。

スポンサードリンク

要素の高さをブラウザの高さにぴったり合わせる方法

まずHTMLはこんな感じです。

<div class="mv">
  メインビジュアル
</div>

とりあえずCSSは以下のようにします。

.mv {
  width: 100%;
  height: 100vh;
  background: url(../images/sample.jpg) no-repeat 0 0 / cover;
}

CSSでheight:100vh;を指定すればブラウザの高さに合わせてくれそうですが、スマホの時は思った表示にならない場合があります。100vhだとアドレスバーの高さを考慮せずに、デバイスの画面の高さになってしまうので、要素の範囲が微妙にはみ出してしまいます。

そこで、jQuery(一部はネイティブJS)を使って高さを調整してあげると、ちょうど画面いっぱいの高さを指定することができます。以下のスクリプトを</body>の直前に追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(window).on('load resize', function () {
    var window_height = window.innerHeight ? window.innerHeight : $(window).innerHeight();
    $('.mv').css('height', window_height + 'px');
  });
</script>

window.innerHeightが取得できたらwindow_heightにwindow.innerHeightの値を、window.innerHeightが取得できない場合は$(window).innerHeight()の値をwindow_heightに代入しています。

ページがロードされるかリサイズされたタイミングで、.mvのheightにwindow_heightの値を指定しています。

これにより、アドレスバーが表示されていても要素をブラウザの高さに合わせることができます。

ブラウザの幅によって値を変更したい場合は、以下のように条件分岐させましょう。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(window).on('load resize', function () {
    var window_height = window.innerHeight ? window.innerHeight : $(window).innerHeight();
    var window_width = window.innerWidth ? window.innerWidth : $(window).width();
    if (window_width <= 768) {
      $('.mv').css('height', window_height + 'px');
    } else {
      $('.mv').css('height', '100vh');
    }
  });
</script>

上記の場合、ブラウザ幅が768px以下の場合はwindow_heightの値を、それ以外は100vhを高さに指定しています。

PCの場合はheight:100vh;でちゃんとブラウザの高さに合わせられるので、タブレット以下の時だけJavaScriptで取得した値を指定する方法で良いかもですね。

あとがき

メインビジュアルをド～ンと画面いっぱいに表示するデザインは、結構な頻度で出会うので、覚えておくと役立つと思います。実際にクライアントワークでもよく使っています。

jQueryを使って要素の高さをブラウザの高さにぴったり合わせる方法