プログラミング

ボックスの高さを画面サイズの高さに合わせる方法【jQuery & CSS】

PCやスマホなど、画面のサイズはデバイスの種類によって違いますが、メインビジュアルの画像などを各デバイスの画面の高さに合わせて表示したい時があると思います。

横幅は100%を指定しておけばレスポンシブに対応できますが、高さは100%にしても思うようにいきません。

そこで、jQueryやCSSでボックスの高さを画面サイズの高さに合わせる方法を紹介します。

紹介するのは次の方法。

  • jQueryで指定する
  • height:100%;で指定する
  • height:100vh;で指定する

デモサイトはこちら

jQueryで指定する

まずはjQueryで指定する方法。この方法を利用しているケースが多いように思います。

jQuery
$(document).ready(function () {
　hsize = $(window).height();
　$(“指定したいid名やclass名”).css(“height”, hsize + “px”);
});
$(window).resize(function () {
　hsize = $(window).height();
　$(“指定したいid名やclass名”).css(“height”, hsize + “px”);
});

簡単に説明すると、ウインドウサイズの高さを取得し、その値をCSSに適用させています。

他のサイトでもっとシンプルな記述方法があったので、そちらも併せて紹介。

jQuery
$(‘指定したいid名やclass名’).css({‘height’:$(window).height()});

1行なのでとてもシンプルです。

height:100%;で指定する

次にheightプロパティで100%を指定する方法です。

最初にこの方法だとうまくいかないと言いましたが、対象の要素に指定するだけではうまくいかないという意味で、body要素とhtml要素にも同じように「height:100%;」を指定すれば大丈夫です。

CSS
html, body { height: 100%; }
.box { height: 100%; }

ただし、全ての親要素に指定しないといけないので、複雑な入れ子構造だと少しややこしいかもしれないです。

height:100vh;で指定する

最後にheightプロパティで100vhを指定する方法。

「vh」とは「viewport height」の略で、ブラウザの高さに対する割合（1vh=1%）を指定することができます。

親要素に「height:100%;」を指定する必要がないので、わりと簡単な方法ではあるんですが、IE9より以前のバージョンのブラウザだと対応していないなどの問題があります。

まとめ

jQueryでウインドウの高さを取得してCSSに反映させる方法やheightプロパティで100%、100vhを指定する方法を紹介しました。

今のところjQueryの方法が一番使いやすい感じがしますが、HTMLとCSSだけで実装したい方はheightプロパティをうまく使えばできると思います。

Leave a Comment