Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSS の min-height プロパティは要素の最小の高さを設定するのに使われます。height プロパティの使用値は、min-height に指定した値よりも小さくなりません。

min-height の値は max-heightheight の両方を上書きします。

初期値0
適用対象次の要素を除く全要素:非置換インライン要素、テーブルの列、列グループ
継承不可
相対値の基準パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず(この場合コンテンツの高さに依存します)この要素が絶対位置指定されていないなら、パーセンテージ値は 0 として扱われます。
メディアvisual
計算値指定されたパーセンテージ値または絶対的な長さ
アニメーションの可否可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* <length> 値 */
min-height: 3.5em;

/* <percentage> 値 */
min-height: 10%;

/* キーワード値 */
min-height: max-content;
min-height: min-content;
min-height: fit-content;
min-height: fill-available;

/* グローバル値 */
min-height: inherit;
min-height: initial;
min-height: unset;

<length>
固定した、高さの最小値です。利用可能な単位については <length> をご覧ください。負の値は宣言を無効にします。
<percentage>
包含ブロックの高さに対する <percentage> で表現された、固定した高さの最小値です。負の値は宣言を無効にします。
max-content
コンテンツにあわせた最適な高さ(The intrinsic preferred height)
min-content
コンテンツにあわせた最小の高さ(The intrinsic minimum height)
fill-available
包含ブロックの高さから水平方向のマージン、ボーダー、パディングを引いたもの。一部ブラウザで、このキーワードに古い名前、available を与えています
fit-content
CSS3 Box では、これは min-content の同義語です。CSS3 Sizing ではもっと複雑なアルゴリズムを定義していますが、実験的な方法を含めても、実装しているブラウザはありません。

形式文法

<length> | <percentage> | auto | max-content | min-content | fit-content | fill-available

table { min-height: 75%; }

form { min-height: 0; }

仕様

仕様書 策定状況 コメント
CSS Intrinsic & Extrinsic Sizing Module Level 3
min-height の定義
草案 キーワード max-contentmin-contentfit-contentfill-available を追加。これは、 CSS3 Box と CSS3 Writing Modes の草案の両方にあった定義に代わる定義です。
CSS Flexible Box Layout Module
min-height の定義
勧告候補 この仕様の 旧バージョンで auto キーワードを追加し初期値として使いました。しかし、CSSWG はその後、この変更を元に戻すことを決めました。2013 年 の 3 月 29 日現在、最新の Editor's Draft では min-width プロパティにもう変更はありません(すなわち、auto 値は導入されませんでした)
CSS Transitions
min-height の定義
草案 min-height をアニメーション可能として定義
CSS Level 2 (Revision 1)
min-height の定義
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 3.0 (1.9) 7.0 [3] 4.0 1.0
2.0.2 (416) for positioned elements
<table> への適用[1] 未サポート (有) 未サポート (有) 未サポート
max-contentmin-contentfit-contentfill-available 未サポート 未サポート 未サポート 未サポート 9
auto 廃止 Gecko 22 21.0 16.0 (16.0) 未サポート 12.10 未サポート
auto を初期値に 廃止 Gecko 22 21.0 18.0 (18.0) 未サポート 12.10 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? 9

注記

[1] CSS 2.1 は明示的に <table> での min-height の挙動を未定義のままにしています。したがってどのような挙動も CSS2.1 対応です。この挙動は新しい CSS 仕様で定義される可能性があるため、ウェブ開発者は現在の特定の挙動を信頼してはいけません。

[2] Firefox ではバグのため (バグ 307866)、display: table-* である要素で min-height を扱えません。

[3] Internet Explorer 10-11 (12+ 以降を除く) では列方向の flex コンテナで宣言した min-height が、コンテナ内の flex アイテムに適用されません。詳しくは Flexbug #3 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Simplexible, Prinz_Rana, yyss, Sebastianz, ethertank, sosleepy
 最終更新者: Simplexible,