ボックスの幅をブラウザの幅にあわせるのは、親要素に幅を指定していなければ「width:100%」も必要ありません。親要素の幅に合わせて100％に勝手になります。

問題は高さです。高さは内包している要素の高さになりますので、「height:100%」としただけではブラウザの高さに合わせられません。

そこで今回はボックスの高さをブラウザの高さに合わせるテクを3つやっていきます。

はじめに

冒頭で『「height:100%」としただけではブラウザの高さに合わせられません。』と書きましたのでサンプルで確認しましょう。

サンプル1

HTML

<div class="box">
    このボックスの高さをブラウザの高さに合わせたい
</div>

CSS

.box{
    background: #ccc;
    height: 100%;
    padding: 20px;
}

というわけで、これではブラウザの高さなりません。

ではどうやるか？ということで下記の方法があります。

height:100%でやる

「height:100%」ではできないって言ったじゃん！と思うかとしれないですが、それだけではダメなんですが、実は親要素にも「height:100%」を指定することで実現できます。

親要素とは「html」と「body」です。「body」だけでいい気がしますがどちらが欠けてもフィットしません。

サンプル2

html,body{
    height: 100%;
}
 
.box{
    background: #ccc;
    height: 100%;
    padding: 20px;
}

できましたね。
私はこの方法は使わないので、この記事をアップする過程で知った次第です。

jQueryでやる

jQueryでやっているサイト多いと思います。サンプルで見てましょう。

サンプル3

HTML、CSSは基本同じです。CSSの「height:100%」はなしにしました。

jQuery

$('.box').css({'height':$(window).height()});

と書くか、

$('.box').outerHeight($(window).height());

でもオッケーです。「padding」を指定している場合は「height」ではなく「outerHeight」でないと画面の高さより、「padding」の値の分出てしまうので注意です。

また、ブラウザのサイズが途中で変わった場合にも適用させるために下記を追加します。

$(window).on('resize',function(){
    winH = $(window).height();
    $('.box').outerHeight(winH);
});

これでユーザーがブラウザサイズを変更しても常にブラウザの高さになります。

vhでやる

CSSには「vh」という単位があります。もちろん「vw」もあります。

「vh」は「viewport height」の略です。
ブラウザの高さが1000pxなら「1vh」で1%の10pxになり、
「100vh」で100％＝ブラウザの高さになります。

やってみましょう。

サンプル4

CSS

.box{
    background: #ccc;
    height: 100vh;
    padding: 20px;
     
}

できました。
サンプル1で確認のとおり、「height:100%」では親要素にも「height:100%」を指定しないとできませんでしたが、「height:100vh」なら簡単にできました。
「vh」は親要素を基準とするのではなく、「viewport」を基準とするためです。

ただ、IEでは「vmax」をサポートしていなかったり、Androidが「4.4」以降のサポートだったりと使うにはまだ懸念材料があります。（※2017.11月時点）

まとめ

ボックスの高さをブラウザの高さに合わせるのは一工夫必要でした。私的には、今後の「vh」に期待が高まっておりますので、ブラウザベンダー様のご対応が統一される日を待ち望みます。

今回の記事で本当にやりたかったのはボックスの高さをブラウザの高さに合わせることではなく、画像や動画をブラウザ全画面にフィットさせるということだったのですが、記事が長くなるので分けることにしました。ですので近日中にこちらの記事をアップしていきたいと思います。

上記の記事をアップしました。続編的な記事になりますのでぜひ見てみてください。

サンプルがあまりにも手抜きなので最後に少しだけ手を加えたサンプルを1つ

サンプル5