Max-height | CSS-Tricks

CSS-Almanach → Eigenschaften → M → max-height

Sara Cope am 15. Jan 2021

Die max-height-Eigenschaft in CSS wird verwendet, um die maximale Höhe eines bestimmten Elements festzulegen. Autoren können beliebige Längenwerte verwenden, solange diese positiv sind. max-height überschreibt height, aber min-height überschreibt immer max-height.

.wrapper {
  height: 100%;     /* full height of the content box */
  max-height: 20em; /* requires an absolute value for height. */
}

.wrapper {
  height: 50px;
  max-height: 20px; /* Will be AT MOST 20px tall : overrides height */
}

.wrapper {
  min-height: 400px; /* overrides height and max-height */
  height: 200px;
  max-height: 300px;
}

Check out this Pen!

Der Prozentsatz wird in Bezug auf die Höhe des enthaltenden Blocks berechnet. Wenn die Höhe des enthaltenden Blocks nicht explizit angegeben ist, wird der Prozentwert als none behandelt. Die Eigenschaft max-height gilt für alle Elemente außer nicht ersetzten Inline-Elementen, Tabellenspalten und Spaltengruppen (d. h. colgroup, col).