画面サイズに合わせて高さを指定する3つの方法

簡単なデモを作っていますのでご覧ください。

画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。

section { background: url(image.jpg) no-repeat fixed; background-size: cover; }

では、高さの指定方法を100%を例に3つ紹介します。

jQueryを使う

まずは、jQueryを使う方法です。個人的には１番なじみがあります。

$(document).ready(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});
$(window).resize(function () {
  hsize = $(window).height();
  $("section").css("height", hsize + "px");
});

ウィンドウの高さを取得して、その値をCSSに書き込みます。

後半部分はユーザーがウインドウサイズを変えたときにあらためて高さを取得しなおすためのものです。

前半の部分だけにしているサイトをたまに見かけますが、途中でウインドウサイズを変えるユーザーを考慮して、後半部分も指定した方がよいと思います。

height: 100%を使う

各セクションにheight: 100%;を指定する方法です。

ただし、画面いっぱいに表示したい要素に対してheight: 100%;を指定するだけでは、思うようになりません。

height: 100%;を指定するには、親要素の高さが決まっている必要があるからです。ということで、親要素であるbodyとhtml要素にもheight: 100%;を指定する必要があります。

html, body { height: 100%; }

htmlにcssを指定するのは個人的に違和感もありますが、これを指定することで解決します。

height: 100vh;を使う

height: 100vh;を指定すると、高さが画面の高さと同じになります。これが１番簡単ですが、対応するブラウザがIE9以上となります。IE以外は問題なく使えます。

IE7ならともかく、IE8となるとまだ無視できない場合も多いかもしれないです。

なお、vhは「viewpoint height」の略で、1vhでが1%の高さとなります。

まとめ

ということで、要素の高さを画面サイズに合わせる方法を３つ紹介しました。

height: 100vh;がブラウザを気にせず使えるようになればベストな選択肢になると思います。

近頃はスマホ、タブレット、PCなど様々な環境で閲覧するユーザーがいますので、その環境に応じた設定が重要になっているのかなと感じています。

そんなとき、今回のような指定方法は便利になってくると思います。