heightに絶対値（px）をつけるべきか？

Web制作をしていると、height: 300px; のように高さをピクセルで固定する場面があります。

しかし結論から言うと、基本的に高さを絶対値で固定するのはおすすめされません。

なぜなら、Webのレイアウトは 内容によって高さが変わる前提で作るのが基本だからです。

高さを固定すると起きる問題

1. コンテンツが増えたときに崩れる

例えば次のようなCSSを書いたとします。

.box {

  height: 200px;

}

この場合、もしテキストが増えると 200pxに収まりきらずにはみ出します。

文字が見切れる

overflowで隠れる

レイアウトが壊れる

という問題が起きます。

2. レスポンシブに弱い

スマホ・タブレット・PCでは画面幅が違います。

高さを固定すると、

PCでは余白が多すぎる

スマホではコンテンツが入りきらない

という問題が起こりやすくなります。

つまり レスポンシブ設計と相性が悪いです。

基本は「高さは指定しない」

多くのケースでは次のようにします。

.box {

  padding: 40px;

}

高さは指定せず、

中身の量によって自然に高さが決まるようにするのが基本です。

これが一番崩れにくい設計になります。

heightを使ってもいいケース

ただし、次のような場合は高さを指定することがあります。

ヒーローセクション

ファーストビューなどは高さを決めることがあります。

.hero {

  height: 600px;

}

画像やカードデザイン

カードレイアウトなどで高さを揃えたいとき。

画面いっぱいのレイアウト

height: 100vh;

のように 画面サイズ基準で指定するケースです。

実務でよく使う代替方法

高さを固定する代わりに、次のプロパティがよく使われます。

min-height

.box {

  min-height: 200px;

}

これは

最低200px

コンテンツが増えれば伸びる

という安全な指定です。

実務では heightよりmin-heightを使うことが多いです。

まとめ

高さの指定は次の考え方が基本です。

基本 → heightは指定しない

コンテンツに合わせて高さを決める

必要な場合だけheightを使う

迷ったらmin-heightを使う

Webレイアウトは「固定する設計」ではなく

変化に強い設計をすることが重要です。