CSS3スタイル虎の巻

height

heightは、要素の高さを指定するスタイルです。

解説

値には数値、割合、autoの3パターンで指定できます。

構文

構文は以下になります。

height: 値;

heightには以下の値が指定できます。

説明
数値pxなどの単位と共に数値で指定する
(例)height:300px;
割合割合で指定する
(例)height:70%;
auto要素の内容により自動で指定される
(例)height:auto;

太字の値は初期値です。

サンプル

要素の高さを80pxにする


.sample01 {
  height:80px;
}

<div class="sample01">height:80px</div>
height:80px;

分かりやすくするため、上記結果例では枠線と背景色を指定しています。

要素の高さを70%にする


.sample02 {
  height:70%;
}

<div class="sample02">height:70%</div>
height:70%;

外側の要素に対して70%のサイズになっています。

備考

  • auto(自動サイズ)がデフォルトのため、自動サイズにしたい場合は特に指定は不要です。

関連項目

  • height:要素の高さを指定する
  • width:要素の幅を指定する