概要
CSS の min-height プロパティは要素の最小の高さを設定するのに使われます。height プロパティの使用値は、min-height に指定した値よりも小さくなりません。
min-height の値は max-height と height の両方を上書きします。
| 初期値 | 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-content、min-content、fit-content、fill-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-content、min-content、fit-content、fill-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 をご覧ください。