【CSS】画面の高さいっぱいに要素を広げたい時の簡単な方法2つ

Webサイトを制作していると、ブラウザの高さいっぱいに要素を広げたい場面はよくでてきますが、要素のheightを100%にしただけでは高さいっぱいに広がらなくて、CSSを勉強したての僕は物凄く困った覚えがあります。。。

そこで今回は、要素を画面の縦いっぱいに広げることができる方法を、3つ紹介します。

height:100vh

何よりも一番簡単な方法があります。

画面の高さいっぱいに広げたい要素のheightに100vhと指定するだけです。

CSS

#box{height:100vh;}

ただこちら、ものすごく便利なのですがファーストビューで全画面表示しようとすると、PCでは問題ないのですがスマホだとアドレスバーのせいで画面から画像がはみ出てしまいます。

ファーストビュー以外で使うのには問題ないので、ファーストビューで画像を全画面表示したい場合は他の方法を選択しましょう。

height:100%

画面の高さいっぱいに表示したい要素にheight:100%を指定してもうまく行かないのには理由があります。height:100%を指定するには、親要素の高さが決まっていないといけないからです。

heightのデフォルト値はautoなので、何も指定しないと親要素であるhtmlとbody要素には高さがないということになります。そこでhtmlとbody要素にheight:100%を指定して高さを作ってあげると、あっという間に要素が画面の高さいっぱいに広がります。

CSS

html,
body,
#box{height:100%;}

こちらはファーストビューで利用しても問題ありません。

番外編（jQuery）

CSS・・・ではなくjQueryで広げる方法もあります。詳細は別記事で書きますので、コードだけ載せておきます。

jQuery

$(function () {
    var winHeight = $(window).height();
    $('#box').height(winHeight);
});
$(window).resize(function () {
    var winHeight = $(window).height();
    $('#box').height(winHeight);
});

こちらもheight:100%同様、ファーストビューで利用しても問題ありません。

まとめ

今の所はファーストビューならjQueryを、それ以外の箇所ならvhを使って全画面表示するのが間違いないかなと個人的には思います。

要素を画面の高さいっぱいに広げないといけない場面があったら、是非この記事を思い出してください。