この文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい！
概要
CSS の max-height プロパティは要素の最大の高さを設定するのに使われます。height プロパティの使用値は、max-height に設定した値よりも大きくなりません。
max-height は height を上書きしますが、min-height は max-height を上書きします。
| 初期値 | none |
|---|---|
| 適用対象 | 次の要素を除く全要素：非置換インライン要素、テーブルの列、列グループ |
| 継承 | 不可 |
| 相対値の基準 | パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず（コンテンツの高さに依存します）この要素が絶対位置指定されていないなら、パーセンテージ値は none として扱われます。 |
| メディア | visual |
| 計算値 | 指定されたパーセンテージ値または絶対的な長さ、または none |
| アニメーションの可否 | 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますlength または percentage, calc(); |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
/* <length> 値 */ max-height: 3.5em; /* <percentage> 値 */ max-height: 75%; /* キーワード値 */ max-height: none; max-height: max-content; max-height: min-content; max-height: fit-content; max-height: fill-available; /* グローバル値 */ max-height: inherit; max-height: initial; max-height: unset;
値
<length>- 固定の、高さの最大値です。利用可能な単位については
<length>をご覧ください <percentage><percentage>は、包含ブロックの高さを基準に計算されます。包含ブロックの高さが明示的に定義されていないときは、パーセンテージ値はnoneとみなされますnone- ボックスの高さに制限を設けません
max-content- コンテンツにあわせた最適な高さ（The intrinsic preferred height）
min-content- コンテンツにあわせた最小の高さ（The intrinsic minimum height）
fill-available- 包含ブロックの高さから水平方向のマージン、ボーダー、パディングを引いたもの。一部ブラウザで、このキーワードに由緒ある名前、
availableを与えています fit-contentmax-contentと同じです
形式構文
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
例
table { max-height: 75%; }
form { max-height: none; }
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 max-height の定義 |
草案 | キーワード max-content、min-content、fit-content、fill-available を追加。これは、 CSS3 Box と CSS3 Writing Modes の草案の両方にあった定義に代わる定義です。 |
| CSS Transitions max-height の定義 |
草案 | max-height をアニメーション可能として定義 |
| CSS Level 2 (Revision 1) max-height の定義 |
勧告 | 初回定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 7.0 | 7.0 | 1.0 |
<table> に適用[1] |
未サポート | (有) | 未サポート | (有) | 未サポート |
max-content、min-content、fit-content、fill-available |
未サポート [3] | 3.0 (1.9)-moz [2] | 未サポート | 未サポート | 未サポート [3] (bug) |
fill-available |
未サポート | 未サポート バグ 527285 | 未サポート | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | ? | ? | ? | ? | ? |
<table> に適用 [1] |
? | ? | ? | ? | ? |
max-content, min-content, fit-content |
? | ? | ? | ? | 9[3] (bug) |
fill-available |
? | ? | ? | ? | ? |
注記
[1] CSS 2.1 は明示的に <table> での max-height の挙動を未定義のままにしています。したがってどのような挙動も CSS2.1 対応です。この挙動は新しい CSS 仕様で定義される可能性があるため、ウェブ開発者は現在の特定の挙動を信頼してはいけません。
[2] Gecko は、CSS3 Basic Box で与えられた定義を実験的に実装しています。そこでは fill-available ではなく available が定義されています。また fit-content の定義は CSS3 Sizing にあるものより簡素です。
[3] WebKit は 高さに intrinsic な高さを設定するために、an earlier proposal を実装しています: キーワード max-content の代わりに intrinsic が、min-content の代わりに min-intrinsic が定義されています。fill-available や fit-content に相当するものはありません。