max-height

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

概要

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

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

  • 初期値 none
  • 適用対象 非置換インライン要素、テーブルの列、列グループを除く全要素
  • 継承 しない
  • 相対値の基準 パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず(コンテンツの高さに依存します)この要素が絶対位置指定されていないなら、パーセンテージ値は none として扱われます。
  • メディア visual
  • 計算値 指定どおりのパーセンテージまたは絶対的な長さまたは none
  • アニメーションの可否可能。長さ、パーセンテージ、calc() として可能。どちらも長さなら長さとして補間。どちらもパーセンテージならパーセンテージとして補間。それ以外では、両方の値は 長さとパーセンテージの合計(各値はゼロかもしれません)を計算する calc() 関数に変換されます。これらの calc() 関数は、それぞれ補間結果を実数として持っています。

構文

形式文法: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available
max-height: 3.5em
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

<length>
固定の、高さの最大値です。利用可能な単位については <length> をご覧ください
<percentage>
<割合> は、包含ブロックの高さを基準に計算されます。包含ブロックの高さが明示的に定義されていないときは、パーセンテージ値は none とみなされます
none
ボックスの高さに制限を設けません
max-content
コンテンツにあわせた最適な高さ(The intrinsic preferred height)
min-content
コンテンツにあわせた最小の高さ(The intrinsic minimum height)
fill-available
包含ブロックの高さから水平方向のマージン、ボーダー、パディングを引いたもの。一部ブラウザで、このキーワードに由緒ある名前、available を与えています
fit-content
max-content と同じです

table { max-height: 75%; }

form { max-height: none; }

仕様

仕様書 策定状況 コメント
CSS Intrinsic & Extrinsic Sizing Module Level 3 草案 キーワード max-content、min-contentfit-contentfill-available を追加。これは、 CSS3 Box と CSS3 Writing Modes の草案の両方にあった定義に代わる定義です
CSS Transitions 草案 max-height をアニメーション可能として定義
CSS Level 2 (Revision 1) 勧告 初回定義

ブラウザ実装状況

機能 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]
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

注記

[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 に相当するものはありません。

関連情報

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す