CSS

Cascading Style Sheets.

viewport height

　高さの単位「vh」を使えば簡単に要素の高さ100%を指定することができます。

viewport height

　CSSで高さの単位「vh」を使うと viewportの高さの割合を指定することができます。

　この「vh」という単位は「viewport height」の略で、他にもvw、vmin、vmaxなどがあり、それらを使って CSSの幅や高さを指定することもできます。「1vh = 1%」で、height:100vh; → height:100%; となります。

vw (viewport width)

viewportの幅の割合

vh (viewport height)

viewportの高さの割合

vmin (viewport minimum)

viewportの幅と高さの値が小さい方の割合

vmax (viewport max)

viewportの幅と高さの値が大きい方の割合

height: 100vh;

　height:100vh; で要素hogeの高さを指定する場合の例。親要素はhtml、bodyです。

.hoge {
	height: 100vh;
}

　viewport heightの場合、高さの指定をしたい要素に height:100vh; を指定するだけです。

height: 100%;

　height: 100%で要素hogeの高さを指定する場合の例。親要素は同じくhtml、bodyです。

html,
body,
.hoge {
	height: 100%;
}

　今まで通りのやり方の場合、高さの指定をしたい要素の親要素全てに height:100%; の指定をする必要がありますが、古いブラウザでも使用することができます。

　ちなみに、コンテンツ量が画面サイズより大きい場合、heightではなく min-height で指定するのがポイントです。そうすることでコンテンツの長さに応じた高さを表示してくれます。

min-height: 100vh;

.hoge {
	min-height: 100vh;
}

min-height: 100%;

html,
body {
	height: 100%;
}

.hoge {
	min-height: 100%;
}

　要素ごとに高さが違う時にこの指定の仕方をするとうまく高さを出してくれます。

　高さの単位「vh」を使えば、要素の高さ100%を指定することができるので、表示デバイスによって高さが変わってしまうようなデザインでも簡単に対応させることができます。

　IEは9以上で使用できます。IE9といえばWindows Vistaです。なので「vh」はもう解禁でいいと思います。

　ただし、要素に position:absolute; が指定してあると高さを出してくれませんので注意する必要があります。