【CSS】高さ・横幅のサイズを画面全体にする簡単な方法｜vw・vh

今回はCSSで、要素の高さ・横幅のサイズを画面全体にする簡単な方法となります。

【CSS】高さ・横幅のサイズを画面全体にする方法

以下のCSSは、classにcontentを持つ要素の横幅・高さを、画面全体のサイズにする例となります。

.content{
	width: 100vw;
	height: 100vh;	
}

vw・vhの値について

CSSのプロパティで長さを指定する場合、相対的な長さと絶対的な長さで指定する単位がありますが、vw・vh は次のように、それぞれビューポートを基準とする相対的な長さの単位となります。

また、「ビューポート」はブラウザのウィンドウの中で、メニューバーなどを除いた表示領域の部分となります。

• 1vwでビューポートの幅1%のサイズとなり、100vwでビューポートの幅100%のサイズ
• 1vhでビューポートの高さ1%のサイズとなり、100vhでビューポートの高さ100%のサイズ

width・heightプロパティの100%について

width・heightプロパティのパーセント値は、包含ブロックのサイズに対しての割合となります。

また、絶対値で指定していない要素の高さは、要素内のコンテンツに依存するため、heightの値に100%を指定した要素でも、画面全体のサイズとならない場合があります。