この文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい!

概要

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

max-heightheight を上書きしますが、min-heightmax-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-content
max-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-contentfit-contentfill-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-contentfit-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-availablefit-content に相当するものはありません。

関連情報

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

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