Height プロパティ
最終更新：2026-09-13
height Height プロパティ
height プロパティは要素のコンテンツ領域の高さを設定し、width と同様に CSS ボックスモデルの中心的なサイズ指定プロパティです。初期値の auto では、ブラウザーがコンテンツから高さを計算します。これが最も一般的で推奨される方法です。パーセンテージの高さは、親に明示的な高さがある場合にのみ有効です。それ以外の場合は 0 として解決されます。
| カテゴリ | |
|---|---|
| 初期値 | auto |
| 継承 | いいえ |
| 適用対象 | non-replaced |
| アニメーションタイプ | length |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
auto | キーワード | ブラウザーが高さを自動的に計算します。 |
<length> | タイプ | 固定された長さの値。 |
<percentage> | タイプ | 包含ブロックの高さに対するパーセンテージ。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
注意： パーセンテージの高さは親に明示的な高さが必要です。ない場合は効果がありません。要素をビューポートいっぱいにしたい場合は vh 単位を使ってください。
❓ よくある質問
Qなぜ height:100% は効かないのですか？
Aパーセンテージの高さは親のコンテンツ領域の高さに対して解決されるため、親の高さが auto（既定）のとき、auto の 100% はやはり auto となり、子のパーセンテージ高さは無視されます。解決策：親に明示的な高さを与える（最も簡単でどこでも効く方法）、vh 単位を使う（height:100vh はビューポートの高さ）、あるいは flex や grid を使って子を自動的に伸ばす。
Q要素の高さをコンテンツに合わせて伸ばすにはどうすればよいですか？
A既定の height:auto を維持してください。そうすればブロックレベル要素の高さはコンテンツによって決まります。より細かく制御するには、下限として min-height、上限として max-height を組み合わせます。min-height:200px は最小高さを保証しつつコンテンツが高いときはボックスを伸ばし、max-height は overflow で溢れを処理しながら高さを上限に抑えます。通常のコンテンツには height を固定しないでください。
Qheight:auto と height:100vh の違いは何ですか？
Aheight:auto は要素をコンテンツに合わせてサイズし、コンテンツが短ければ箱も低く、長ければ高くなります。height:100vh は要素をビューポートと同じ高さにし、コンテンツが少なくても画面いっぱいに広がり、超えると溢れます。ページ本体を最低でも画面1枚分の高さにしつつ伸びも許可するなら、height:100vh より min-height:100vh を推奨します。
Q子要素を親の高さいっぱいに広げるにはどうすればよいですか？
A方法1：親に固定高さを与え、子に height:100% を指定する。方法2：親を display:flex にし、flex アイテムは既定で伸びるため子を align-self:stretch で伸ばす。方法3：grid では子に height:100% または 1fr を使う。height:100% は親自身に確定した高さがないと機能しない点に注意してください。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
