max-height

max-height は CSS のプロパティで、要素の最大高を設定します。これは height プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

max-height は height を上書きしますが、 min-height は max-height を上書きします。

構文

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

/* <percentage> 値 */
max-height: 75%;

/* キーワード値 */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content(20em);

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

値

<length>
max-height を絶対的な値で定義します。
<percentage>
max-height を包含ブロックの高さに対するパーセント値で定義します。
auto
ブラウザーは指定された要素の max-height を計算して選択します。
none
ボックスの寸法を制限しません。
max-content
内容物が推奨する max-height です。
min-content
内容物の最小の max-height です。
fit-content(<length-percentage>)
利用可能な空白をして死された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。

形式文法

auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

例

table { max-height: 75%; }

form { max-height: none; }

アクセシビリティの考慮事項

ページを拡大縮小して文字サイズを拡大した際に、 max-height を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

仕様書

仕様書 状態 備考
CSS Box Sizing Module Level 4
max-height の定義		 編集者草案
CSS Box Sizing Module Level 3
max-height の定義		 草案 キーワード max-content, min-content, fit-content を追加。
CSS Level 2 (Revision 1)
max-height の定義		 勧告 初回定義
初期値none
適用対象非置換インライン要素、テーブルの列、列グループを除くすべての要素
継承なし
パーセンテージ パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず（コンテンツの高さに依存します）この要素が絶対位置指定されていないなら、パーセンテージ値は none として扱われます。
計算値指定されたパーセンテージ値または絶対的な長さ、または none
アニメーションの種類length または percentage, calc();

ブラウザーの互換性

BCD tables only load in the browser

関連情報