[CSS]height: 100%でハマりやすいポイント。

CSSのプロパティ「height」でハマりやすいポイントをメモ。

「height」プロパティは文字通りボックスの"高さ"を指定してあげるプロパティです。

が、安易に「height: 100%」としても、高さが幅いっぱいになってくれないと思います。

画面全体に表示させるための「height」指定

まずはおさらい。

本来の「height」仕様

CSSの仕様として、heightを「単位%」で数値指定する際は、その"親要素"のheightを「基準」にするからなんです。

また、初期値は「auto」。

これもおさらいになりますが、「auto」の意味合いは『内容に依存して高さを"自動的"に決める』でしたね。

したがって、下記だけでは、ボックス内の要素分の高さしか持てません。

div {
 height: 100%;
}

親要素である「html, body」にも『height: 100%』を指定してあげる

ボックスの高さを画面全体に合わせるためには、親要素にも「height: 100%」を指定してあげればOKです。

たとえば、こんな感じ。

html, body {
 height: 100%;
}
div {
 height: 100%;
}

htmlファイル内にて、最も「親要素」となる『html, body』要素にも高さを指定してあげるのがポイントですね。

関連するWeb制作・開発Tips

関連リンク