max-height

La propietat CSS max-height estableix l'alçada màxima d'un element. Impedeix que el valor utilitzat per la propietat height sigui més gran que el valor especificat per max-height.

/* <length> value */
max-height: 3.5em;

/* <percentage> value */
max-height: 75%;

/* Keyword values */
max-height: none;
max-height: max-content;
max-height: min-content;
max-height: fit-content;
max-height: fill-available;

/* Global values */
max-height: inherit;
max-height: initial;
max-height: unset;

max-height anul·la height, però min-height anul·la max-height.

Initial value	`none`
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	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`.
Media	visual
Computed value	the percentage as specified or the absolute length or `none`
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

Sintaxi

Valors

<length>: L'alçada màxima, expressada com <length>.
<percentage>: L'alçada màxima, expressada com <percentage> de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no s'especifica explícitament, el valor del percentatge es tractarà com a zero.

Valors de paraules clau

none: L'alçada no té un valor màxim.
max-content: L'alçada preferida intrínseca.
min-content: L'alçada mínima intrínseca.
fill-available: L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit. (Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available.)
fit-content: El mateix que max-content.

Sintaxi formal

<length> | <percentage> | none | max-content | min-content | fit-content | fill-available

Exemples

table { max-height: 75%; }

form { max-height: none; }

Especificacions

Especificació	Estat	Comentari
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'max-height' in that specification.	Working Draft	Afegeix les paraules clau `max-content`, `min-content`, `fit-content` i `fill-available`. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
CSS Transitions The definition of 'max-height' in that specification.	Working Draft	Defineix `max-height` com animable.
CSS Level 2 (Revision 1) The definition of 'max-height' in that specification.	Recommendation	Definició inicial.

Navegador compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Descripció	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Suport bàsic	1.0	(Yes)	1.0 (1.7 or earlier)	7.0	7.0	1.0
s'aplica a `<table>`^[1]	No support	No support	(Yes)	No support	(Yes)	No support
`max-content`, `min-content` i `fit-content`	No support [3]	No support	3.0 (1.9)-moz [2]	No support	No support	9[3](bug)
`fill-available`	No support	No support	No support errada 527285	No support	No support	No support

Descripció	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Suport bàsic	?	(Yes)	?	?	?	?
s'aplica a `<table>`^[1]	?	No support	?	?	?	?
`max-content`, `min-content` i `fit-content`	?	No support	?	?	?	9[3](bug)
`fill-available`	?	No support	?	?	?	?

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-height amb <table>. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content. No hi ha equivalent per fill-available o fit-content.