height

CSSでは、コンテンツの高さを指定することができます。

本ページでは、heightプロパティについて説明します。

heightプロパティとは

heightプロパティを使うと、コンテンツ領域の高さを指定することができます。コンテンツ領域とは、枠線(境界線)やパディング領域の内側にある、テキストなどを表示する領域です。

heightの定義は、以下のとおりです。

【heightの定義】
値	length \| percentage \| auto \| inherit
初期値	auto
適用対象	すべての要素(置換要素でないインラインボックスの要素、displayがtable columns、column groups を除く)
継承	しない

置換要素とは、iframe、video、img要素などを示します。

以下は、heightで使える値と説明です。

heightの利用例は、以下のとおりです。

【heightの利用例】

.test {
  height: 100px;
  border: solid;
}

上記は、以下のように表示されます。

高さが100px(境界線除く)で表示されています。

以下のHTMLがあったとします。

【heightのパーセント利用を説明するためのHTML】

<div class="test">
<div>テスト</div>
</div>

CSSでは、heightでパーセントを使ってみます。

【heightのパーセント利用例】

.test {
  border: solid red;
  height: 100px;
}

.test * {
  border: solid;
  height: 40%;
}

上記は、以下のように表示されます。

height:40%なので、親要素の40%の高さで表示されています。

heightは、spanなどのインラインボックスの要素には適用できません(img要素などには適用できます)。また、表のcolgroupなども適用できません。表で高さを指定したい場合は、tableやtr、td要素などで指定します。

最も重要なことは、デフォルトでは境界線を含めた高さを指定するのではなく、コンテンツ領域の高さを指定するという点です。親要素の高さが200pxで、heightを200pxに指定した場合、パティングや境界線があると、はみ出してしまいます。詳細は、「ボックスモデル」をご参照ください。

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目	IE	Ed	Fx	Ch	Sa	Op
height	〇	〇	〇	〇	〇	〇

【スマートフォン】
項目	Sa	An	Op	Ch	Fx	Sm
height	〇	〇	〇	〇	〇	〇

※スマートフォンのFirefoxとChromeは、Android版です。