The CSS height property sets an element’s height, but percentage heights work only when the containing block’s height is specified, so it’s often used with min-height, vh, and overflow for reliable layouts.
height は、要素の「高さ」を指定し、% や vh の基準と overflow まで含めてレイアウトの破綻を防ぐために使います。
height と auto の違い（何が「固定」されるか）を説明できる% が効く/効かない条件（親の高さが未確定だと崩れる）を判断できるmin-height/max-height とセットで安全に高さ設計できるoverflow と組み合わせて「はみ出し」の事故を制御できるheight って何？ざっくり言うと、height は「箱の高さを決める」指定で、auto（中身に合わせる）と違って中身が増えても箱は伸びないのが事故ポイントです。
height: auto：中身の高さに合わせて伸びる（デフォルト感覚）height: 200px：箱の高さを固定する（中身が増えると溢れる）height: 50%：親の高さが「決まっている」ときだけ相対指定として効くheight は要素の高さ（縦方向サイズ）を指定し、レイアウト計算に使われます。コンテンツ量に任せるか、一定の高さに制御するかを選ぶためのプロパティです。
height は多くの要素に適用されますが、通常の inline 要素には効きません（高さは行のレイアウトに吸収されやすい）。高さを効かせたいなら display: inline-block / block / flex / grid などにします。
px/rem/%/vh などで指定できるmax-height と併用して「これ以上は伸ばさない」を作れるoverflow と併用して「溢れたときの見せ方」を決められるinline 要素の見かけの高さを直接増やすこと（line-height や display 側の話になる）% を「親の高さが未確定」な状態で期待どおりに効かせることoverflow で制御が必要）height はボックスの縦サイズを決め、周囲の配置や折り返し、スクロール発生に影響します。高さを固定すると、内容が増えてもボックスが伸びず、溢れが発生しやすくなります。overflow の設定次第でスクロールや切り抜きが発生します。背景や枠線は指定した高さに合わせて描画されます。overflow: auto など）を作ると、ユーザーは「ページ」ではなく「箱」の中をスクロールする状態になります。モバイルでは操作感が変わるので、必要な箇所に限定します。min-height や clamp()、または溢れを避ける設計を優先します。CSS
.box {
height: 200px;
}まずは「高さを数値で固定する」を起点に、溢れるなら overflow、固定したくないなら min-height に寄せる、で覚えると迷いにくいです。
height: 240px;min-height: 240px;height: 60vh;（表示領域の高さ基準）%（親の高さが決まっているときだけ）height: 50%;（親の高さが未確定だと期待どおりになりにくい）height: 240px; overflow: auto;min-height: clamp(180px, 30vh, 420px);.card や .hero など、役割を持ったクラスに高さルールをまとめて管理します。<style>style="height: 200px" は検証には使えますが、運用では追跡しづらいので基本は避けます。1) height を px で固定（溢れは overflow）
この箱は高さが固定です。
中身が増えると溢れます。overflow: auto ならスクロールで読めます。
文章が増える想定（翻訳/端末差/文字サイズ変更）を考えると、固定は必要な場面だけにします。
height: 120px / overflow: auto
2) height を % で指定（親の高さが必要）
この箱は親の高さに対する %です。
親の高さが決まっているので、% が素直に効きます。
親：height 220px / 子：height 50%
HTML
<div class="demo-box">...</div>
<div class="demo-parent">
<div class="demo-box">...</div>
</div>CSS
.demo-parent {
height: 220px; /* %デモ用の親の高さ */
}
.demo-box {
height: 120px; /* pxデモの初期値 / %デモではJSで上書き */
overflow: auto; /* 溢れたらスクロール */
}JavaScript
percentBox.style.height = pc + "%";height は継承しません。親に書いた高さが子へ自動で伝わるわけではありません。auto（中身に合わせる）として扱われます。inline 要素では高さ指定が効きません。高さを持たせたい場合は display を変えます（例：inline-block）。height: 50%; は親（包含ブロック）の高さが確定しているときに、親の高さを基準に計算されます。親の高さが auto のままだと、% が期待どおりに効かない/計算できない状況が起きます。vh の基準は？vh は表示領域（ビューポート）の高さ基準です。ページ全体ではなく「画面」を基準にするので、ヒーローやモーダルで便利ですが、固定しすぎると小さい画面で溢れやすくなります。height（px換算など）を確認します。% を指定しているのに計算されていない場合は「親の高さが未確定」を疑います。height を書かなければ auto となり、コンテンツに合わせて伸びます。固定したい理由がないなら省略が安全です。height: big;）は無視され、その宣言は効きません。DevTools の Styles で無効化（取り消し線など）を確認します。height はアニメーション可能です。ただしレイアウトが毎フレーム変わり重くなりやすいので、必要最小限にし prefers-reduced-motion を尊重します。height を指定すれば中身に合わせて伸びるheight を固定すると箱は伸びず、増えた中身は溢れます。伸ばしたいなら height を外して auto にするか、最低限だけなら min-height を使います。height: 100% はいつでも親と同じ高さになるauto のままだと 100% が期待どおりにならない状況が起きます。height と line-height を混同する似ていますが役割が違います。
height：要素（箱）の高さline-height：テキストの行の高さ（読みやすさ・縦のリズム）inline 要素に height を書いて効かないspan など通常の inline は高さ指定が効きません。display: inline-block にすると箱として高さを持てます。ファーストビューで一定の存在感が必要なら height: 60vh; のように画面基準で確保します。ただし小さい画面で溢れないよう、min-height や clamp() で極端を避けます。
ページ全体ではなく、特定の箱の中だけスクロールさせたい場合は max-height と overflow: auto を組み合わせます。スクロール領域が増えると操作感が変わるので、必要箇所に限定します。
文章量が変わるカードは固定 height だと溢れやすいので、まず min-height で最低限を揃え、内容が多いカードだけ自然に伸びるようにします。
height: 100% が効かない」auto）height（または設計として min-height）を与えるか、% をやめて vh など別基準を検討します。height がどう計算されているか、親の height が auto のままかを見ます。overflow まで決めるheight を固定するなら、溢れたときの挙動を overflow（hidden/auto 等）で決めます。テキストが重要なら隠すよりスクロールやレイアウト再設計を優先します。min-height を検討するmin-height のほうが破綻しにくいです。height を書いたのに効かない」inline 要素に指定しているspan などに height を書いても効きません。display: inline-block にして箱として扱います。clamp() やメディアクエリで調整するmin-height: clamp(180px, 30vh, 420px); のように極端を避けます。文字サイズ変更でも読める余裕を確保します。min-height やレイアウト側で吸収するoverflow: auto）は必要箇所に限定し、モバイルの操作感を意識するprefers-reduced-motion を尊重するmin-height / max-heightheight 単体よりセットで考える場面が多い。overflowoverflow: auto で箱内スクロールにできる。box-sizingheight と padding/border の関係（見かけのサイズ感）に影響する。思ったより大きい/小さいと感じたら疑う。displayinline では高さが効きにくい。高さ指定が必要なら inline-block やブロック化を検討する。line-heightaspect-ratioinline だと高さが効かないBad / Good
inline は高さ指定が効きにくいので、箱にしたいなら inline-block にします。
inline（height指定しても効きにくい）
inline-block（heightが箱として効く）
CSS
.bad {
display: inline;
height: 120px;
}
.good {
display: inline-block;
height: 120px;
}auto：中身に合わせてサイズが決まる状態（高さ固定ではない）height: 100% を子に書いているが、親の高さが未指定で効かないspan など inline に height を書いて効かないoverflow を未指定height と line-height を混同して縦位置を崩すheight: 100% が効かないとき、最初に疑うべき条件は？auto のままだと % を計算できず、期待どおりになりにくいです。
span に height を指定しても高さが変わらないのはなぜ？inline 要素は高さ指定が効きにくいからです。箱として扱うなら display: inline-block などにします。
overflow（例：overflow: auto）を追加します。ただし、そもそも固定が必要か（min-heightで足りないか）も再検討します。
height より min-height が安全です。最低限だけ揃え、内容が多いものは自然に伸びます。
height が勝っているか、Computed で最終的な height（%がどう計算されたか）を見ます。
height: 100% が効かないのはなぜ？height: auto のままだと、子の % 高さは期待どおりに計算できません。DevTools の Computed で親子の height を確認します。height は切れやすいので、まず min-height を検討します。どうしても固定するなら、溢れ方（overflow）をセットで決めます。height と min-height はどう使い分ける？height、「最低限の高さだけ確保して内容に応じて伸びたい」なら min-height が向きます。実務では後者のほうが破綻しにくいです。max-height と overflow: auto を組み合わせます。スクロール領域が増えると操作感が変わるので、必要箇所に限定します。height: 100% が効かないauto）。確認：DevTools の Computed で親子の height。解決：親に高さ/下限を与える、または % をやめて vh 等へ。height に対して内容が多い。確認：Box Model と overflow の設定。解決：min-height に寄せる、または overflow で溢れ方を制御。height を書いたのに効かないinline、上書きされている。確認：DevTools の Styles（勝っている宣言）と Computed。解決：display を変更、または詳細度/読み込み順を整理。vh の固定が強すぎる。確認：Computed の高さと内容量。解決：clamp()、メディアクエリ、固定の撤廃。height ではなく min-heightoverflow までセットで決める% を使いたい？ → 親の高さが確定しているかを先に確認するinline ではないか、Styles/Computed で上書きを確認するclamp() や vh の使い過ぎを見直す