max-height

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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;
max-height: fill-available;

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

値

<length>

固定の、高さの最大値です。利用可能な単位については <length> をご覧ください

<percentage>

<percentage> は、包含ブロックの高さを基準に計算されます。包含ブロックの高さが明示的に定義されていないときは、パーセンテージ値はゼロとみなされます

キーワード値

none

ボックスの高さに制限を設けません

max-content

コンテンツ本来の望ましい高さを確保します。

min-content

コンテンツの本質を崩さない範囲で最小の高さを確保します。

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; }

アクセシビリティへの配慮

ユーザーが文字を大きくしようとしてページを拡大した時に、max-height を指定した要素が切り詰められたり、他の要素をおおい隠したりしないように注意してください。

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4  | W3C Understanding WCAG 2.0

仕様

ブラウザー実装状況

関連情報

• CSS 基本ボックスモデルの紹介
• max-width, box-sizing, height, min-height