Min-Height プロパティ
最終更新：2026-09-13
min-height Min-Height プロパティ
min-height プロパティは要素の最小高さを設定し、コンテンツが短くても一定の高さを保つことを保証します。初期値の 0 は下限がないことを意味します。これはページのセクションを視覚的に統一したり、フッターをページ下部に固定したりするのによく使われます。
| カテゴリ | |
|---|---|
| 初期値 | 0 |
| 継承 | いいえ |
| 適用対象 | non-replaced |
| アニメーションタイプ | length |
| CSS バージョン | CSS2 |
| 状態 | 標準 |
📝 構文
min-height: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
0 | キーワード | 最小高さの制限なし。 |
<length> | タイプ | 固定された最小高さ。 |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
ヒント： min-height は height や max-height より優先され、コンテンツが高いときは要素が自動的に伸びます。
❓ よくある質問
Qmin-height と height の違いは何ですか？
Aheight は固定の高さなので、設定値より高いコンテンツはボックスから溢れ、既定で表示されます。min-height は下限だけを設定します。コンテンツが短いときは要素は設定高さを保ち、高いときは溢れずに自動的に伸びます。そのため、カードやモーダル、ページ本体のようにコンテンツ長が不確実なコンポーネントには、min-height がより安全で柔軟な選択となります。
Qページ本体を最低でも画面1枚分の高さにするにはどうすればよいですか？
Aメインコンテナに min-height:100vh を指定してください。コンテンツが少なくても本体は少なくともビューポートの高さを埋め、多いときは下へ伸びるため、フッターが画面中途半端にぶら下がることはありません。100vh はビューポートの高さの 100% を意味します。height:100vh と違い、min-height はコンテンツが1画面を超えても固定高さにロックされず、通常通りスクロールできます。これはアプリの枠組みや記事ページの両方で標準的なパターンです。
Qどちらが優れているか： min-height:100vh と height:100vh？
Aheight:100vh は高さをビューポートに固定するため、コンテンツが長いと溢れるか内部スクロールが必要になり、モバイルの活動ページのような単一画面アプリに向きます。min-height:100vh は最低1画面を保証しつつコンテンツに合わせて伸びるため、一般的なページレイアウトに最適です。ほとんどのウェブサイトは min-height:100vh を使うべきで、flex と組み合わせれば短いビューポートでもフッターを下部に押し下げる「粘着フッター（sticky footer）」も実現できます。
Qなぜ min-height のパーセンテージが効かないのですか？
Aheight と同様に、min-height のパーセンテージは親のコンテンツ領域の高さに対して計算され、親の高さが auto のときは効きません。子を親の高さいっぱいにするには、まず親に確定した高さが必要です。あるいは align-items が既定で stretch になる flex レイアウトに切り替え、アイテムを自動的に伸ばす方法もあります。これがほとんどの場合に推奨される方法です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
