ビジュアルを重視したウェブデザインに多いレイアウトで、ウィンドウサイズ(画面のサイズ)の高さに合わせて画像や要素を全面表示する方法です。

メディアクエリで複数のサイズを指定するよりも簡単にレスポンシブ対応できるので便利です。

ウィンドウサイズに合わせて要素の高さ(縦幅)を合わせる方法

height:100%

CSSだけで対応できる方法です。

htmlとbody要素に100％を設定してから、全画面で表示させたい要素にも100％を用いるだけ。

html, body {
  height: 100%; //親要素の高さを最大化
}
.max-height {
  hight: 100%; //親要素の高さに合わせて最大化
}

jQuery

普段ウェブサイト制作でjQueryを使うことが多いのでよく用いるのはこちら。

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

[.max-height]には全画面表示させたい要素のclass名またはid名などを挿入します。

height:100vh

「vh(viewport height)」は比較的新しい単位で、画面サイズに対する割合を指定することができます。

.max-height {
  height: 100vh;
}

記述的に最もスマートなのは「vh」ですが、比較的新しい単位…という点で古いブラウザやOSだと対応していない場合があります。

vhの対応環境

• IE9以上
• Google Chrome
• Firerfox
• Safari
• Opera
• iOS(Safari) v6.0以上
• Andorid v4.4以上

まとめ

「vh」を用いる際は制作サイトの流入ユーザーのメイン層を理解した上で使う必要がありそうです。

無難なのは「100％」と「jQuery」ですね。