max-height
は CSS のプロパティで、要素の最大高を設定します。これは height
プロパティの使用値が、 max-height
に指定した値を上回ることを防ぎます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
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
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。