mozilla
Ihre Suchergebnisse

    max-height

    Übersicht

    Die max-height Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der height Eigenschaft größer wird als der festgelegte Wert von max-height.

    max-height überschreibt height, aber min-height überschreibt max-height.

    • Initialwert none
    • Anwendbar auf all Elemente but non-replaced inline Elemente, table columns, undcolumn groups
    • Vererbt Nein
    • Prozentwerte The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.
    • Medium visuell
    • Berechneter Wert the percentage as specified oder the absolute length oder none
    • Animierbar Ja, als Längenangabe, Prozentsatz oder min-height
    • Kanonische Reihenfolge die einzige nicht missverständliche Reihenfolge definiert durch die formale Grammatik

    Syntax

    Formale Syntax: <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
    

    Werte

    <length>
    Eine feste Maximalhöhe. Siehe <length> für mögliche Einheiten.
    <percentage>
    Der <percentage> Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als none behandelt.
    none
    Das Element verfügt über keine maximale Höhe.
    max-content
    Die innere bevorzugte Höhe.
    min-content
    Die innere Minimalhöhe.
    fill-available
    Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort available.
    fit-content
    Hat die gleiche Bedeutung wie max-content.

    Beispiele

    table { max-height: 75%; }
    
    form { max-height: none; }
    

    Spezifikationen

    Spezifikation Status Anmerkung
    CSS Intrinsic & Extrinsic Sizing Module Level 3
    Die Definition von 'max-height' in dieser Spezifikation.
    Arbeitsentwurf Fügt die Schlüsselwörter max-content, min-content, fit-content und fill-available hinzu.
    Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.
    CSS Transitions
    Die Definition von 'max-height' in dieser Spezifikation.
    Arbeitsentwurf Definiert max-height als animierbar.
    CSS Level 2 (Revision 1)
    Die Definition von 'max-height' in dieser Spezifikation.
    Empfehlung Ursprüngliche Definition

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Grundlegende Unterstützung 1.0 1.0 (1.7 oder früher) 7.0 7.0 1.0
    kann auf <table> angewendet werden[1] Nicht unterstützt (Ja) Nicht unterstützt (Ja) Nicht unterstützt
    max-content, min-content und fit-content Nicht unterstützt [3] 3.0 (1.9)-moz [2] Nicht unterstützt Nicht unterstützt Nicht unterstützt [3]
    fill-available Nicht unterstützt Nicht unterstützt Bug 527285 Nicht unterstützt Nicht unterstützt Nicht unterstützt
    Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Grundlegende Unterstützung ? ? ? ? ?
    kann auf <table> angewendet werden[1] Nicht unterstützt (Ja) Nicht unterstützt (Ja) Nicht unterstützt
    max-content, min-content und fit-content Nicht unterstützt [3] 3.0 (1.9)-moz [2] Nicht unterstützt Nicht unterstützt Nicht unterstützt [3]
    fill-available Nicht unterstützt Nicht unterstützt Bug 527285 Nicht unterstützt Nicht unterstützt Nicht unterstützt

    Hinweise

    [1] CSS 2.1 lässt das Verhalten von max-height innerhalb <table> Elementen explizit undefiniert. Daher ist jedes Verhalten CSS2.1 konform; neuere CSS Spezifikationen definieren möglicherweise dieses Verhalten, daher sollten sich Webentwickler aktuell nicht auf ein bestimmtes Verhalten verlassen.

    [2] Gecko implementiert die Definitionen von CSS3 Basic Box experimentell. Diese Spezifikation definiert available und nicht fill-available. Darüberhinaus ist die Definition von fit-content einfacher als in CSS3 Sizing.

    [3] WebKit implementiert einen früheren Vorschlag, um die Höhe auf eine echte Höhe zu setzen: die Schlüsselwörter intrinsic anstatt max-content und min-intrinsic anstatt min-content. Es gibt kein Äquivalent zu fill-available oder fit-content.

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz, SJW, fscholz, Michael2402, Jürgen Jeka
    Zuletzt aktualisiert von: Sebastianz,