Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

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

    関連情報

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

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