CSS heightの使い方と100パーセントが効かない原因を徹底解説

折原 慧ウェブデザインデイ 編集ライター

「height: 100%を指定したのに、なぜか要素が広がらない」——CSSでレイアウトを組んでいると、多くの方が一度はこの壁にぶつかります。実は、これには明確な理由があるのです。

個人的にWeb制作に携わってきた中で気づいたのは、height（高さ）プロパティは一見シンプルなのに、box-sizingや親要素との関係を理解していないと、思わぬところでつまずくということです。

この記事では、heightの基本から、多くの方が悩む「autoと100%の違い」、そしてよくあるトラブルの解決法まで、実務で使える知識をまとめました。

CSS heightプロパティの基本

heightプロパティは、要素の高さを指定するためのCSSプロパティです。

ここで重要なのが、デフォルトでは「コンテンツ領域（内容部分）」の高さを指定するという点です。paddingやborder、marginは含まれません。

初期値はautoです。autoの場合、ブラウザが要素の中身に合わせて高さを自動的に計算します。つまり、テキストが増えれば要素も縦に伸びていく、という自然な動きになります。

.box {
  height: 200px;      /* 固定値 */
  height: 50%;        /* 親要素の高さの50% */
  height: auto;       /* 内容に合わせて自動（初期値） */
  height: 100vh;      /* 画面の高さいっぱい */
}

heightで指定できる値の種類

heightにはいくつかの値を指定できます。それぞれの特徴を理解しておくと、場面に応じて使い分けられるようになります。

auto（自動）

初期値であり、内容の量に応じてブラウザが高さを決めます。ブロック要素は中身に合わせて縦に伸びていきます。中身が空でpaddingもない場合、高さは0になることもあります。

数値（length）

px、em、rem、vhなど、具体的な単位で固定の高さを指定します。height: 200pxのように固定すると、中身がはみ出した場合はoverflowプロパティに従って処理されます。なお、高さにマイナスの値は指定できません。

パーセンテージ（percentage）

親要素（包含ブロック）の高さに対する割合で指定します。ここが多くの方のつまずきポイントです。

height: 100%を機能させるには、親要素にも高さが指定されている必要があります。親の高さがautoのままだと、パーセント指定は基準となる値を持たず、期待どおりに動きません。

min-content / max-content

コンテンツの持つ本来のサイズ（内在サイズ）に基づいて高さを決めるキーワードです。基本的なチュートリアルではあまり触れられませんが、覚えておくと柔軟なレイアウトに役立ちます。

height 100%が効かない原因と解決法

「height: 100%を書いたのに何も変わらない」——これは本当によく寄せられる悩みです。

原因はほとんどの場合、親要素に高さが設定されていないことにあります。パーセント指定は、親の高さを基準に計算されるため、その基準がなければ計算しようがないのです。

/* html, bodyまで高さを設定する */
html, body {
  height: 100%;
  margin: 0;
}
.full-height {
  height: 100%;   /* これで親の高さいっぱいになる */
}

/* もしくはvhで画面基準にする */
.full-screen {
  height: 100vh;  /* 親要素に依存しない */
}

heightとautoの違いを理解する

height: autoとheight: 100%は、似ているようで動きがまったく異なります。

autoは「中身の量」に高さが従います。テキストが3行なら3行分、10行なら10行分の高さになります。

一方100%は「親の高さ」に従います。中身が少なくても、親が広ければそれに合わせて広がります。

box-sizingとheightの関係

heightを扱ううえで避けて通れないのが、box-sizingとの関係です。

デフォルト（content-box）では、指定したheightは「コンテンツ領域」の高さになります。そこにpaddingやborderが加わると、要素全体の見た目の高さは指定値より大きくなります。

ここでbox-sizing: border-boxを指定すると、heightの値がpaddingとborderを含んだ高さになります。デザインの数値どおりにサイズを合わせやすくなるため、実務では多くの場合border-boxが好まれます。

/* 全要素をborder-boxにする定番の指定 */
* {
  box-sizing: border-box;
}

.box {
  height: 100px;
  padding: 20px;
  border: 2px solid #333;
  /* border-boxなら見た目も100pxに収まる */
}

なお、marginは常にボックスの外側にあり、heightには一切含まれません。この点は覚えておくと混乱を防げます。box-sizingと関連の深い概念についてはcontainの意味を解説した記事も参考になります。

固定の高さとoverflowの扱い

height: 200pxのように高さを固定すると、中身がその高さに収まらない場合に「はみ出し（オーバーフロー）」が発生します。

このはみ出しをどう扱うかは、overflowプロパティで制御します。scrollを指定すればスクロールバーが出て、hiddenを指定すればはみ出した部分は隠れます。

.scroll-box {
  height: 200px;
  overflow: auto;   /* 必要なときだけスクロール表示 */
}

min-heightとmax-heightで柔軟に

heightを固定してしまうと、内容が増えたときに窮屈になりがちです。そこで役立つのがmin-heightとmax-heightです。

min-heightは最小の高さを指定し、それ以下には縮まなくなります。「最低でもこの高さは確保したい」という場面で活躍します。

max-heightは最大の高さを指定し、それ以上には伸びなくなります。max-heightにはnoneを指定でき、その場合は上限なしになります。

個人的には、レスポンシブなレイアウトではheightを固定するよりも、min-heightを活用する方が破綻しにくいと感じています。画面いっぱいのセクションならvh単位の使い方と組み合わせると、より柔軟な表現ができます。

ビューポート単位でフルスクリーン表示

「ファーストビューを画面いっぱいに広げたい」というニーズには、vh（ビューポートの高さ）が便利です。

100vhは画面の高さの100%を意味します。親要素の高さに依存しないため、height: 100%で悩む場面を回避できます。ページ全体の表現力を高めたいときは、動きのあるCSSアニメーションとの組み合わせも効果的です。

よくある質問

height: 100%を指定しても高さが変わらないのはなぜですか

最も多い原因は、親要素に高さが指定されていないことです。パーセント指定は親の高さを基準に計算されるため、html・bodyまで遡って高さを設定するか、100vhを使う方法をおすすめします。

heightとmin-heightはどちらを使うべきですか

高さをきっちり固定したいならheight、内容量に応じて伸びる余地を残したいならmin-heightが向いています。レスポンシブ対応ではmin-heightの方が破綻しにくい傾向があります。

span要素にheightが効かないのですが

span要素などの非置換インライン要素にはheightが適用されません。display: blockまたはinline-blockに変更すると高さを指定できるようになります。

heightに指定した値どおりに要素が表示されないのはなぜですか

デフォルトではpaddingとborderが高さに加算されるためです。box-sizing: border-boxを指定すれば、heightの値の中にpaddingとborderが含まれ、見た目のサイズが揃いやすくなります。

vhとパーセントはどう使い分ければよいですか

画面全体を基準にしたいときはvh、親要素を基準にしたいときはパーセントが適しています。フルスクリーンのヒーローエリアには100vh、カード内の高さ揃えにはパーセント、といった使い分けが実践的です。

まとめ

heightプロパティは、初期値のautoから固定値、パーセント、vhまで、場面に応じた使い分けが鍵になります。

特に「height: 100%が効かない」問題は、親要素の高さを確認するか、vhへ切り替えることでほとんど解決できます。box-sizing: border-boxやmin-height・max-heightを味方につければ、より崩れにくいレイアウトが実現できるはずです。

まずは手元のコードでhtml, bodyに高さを設定するところから試してみてください。小さな理解の積み重ねが、思いどおりのレイアウトへの近道になります。