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 valuenone
Applies toall elements but non-replaced inline elements, table columns, and column groups
Inheritedno
PercentagesThe 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.
Computed valuethe percentage as specified or the absolute length or none
Animation typea length, percentage or calc();

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 This is an experimental API that should not be used in production code.
L'alçada preferida intrínseca.
min-content This is an experimental API that should not be used in production code.
L'alçada mínima intrínseca.
fill-available This is an experimental API that should not be used in production code.
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 This is an experimental API that should not be used in production code.
El mateix que max-content.

Sintaxi formal

none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)
where 
<length-percentage> = <length> | <percentage>

Exemples

table { max-height: 75%; }

form { max-height: none; }

Especificacions

Especificació Estat Comentari
CSS Box 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!

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 This is an experimental API that should not be used in production code. No support [3] No support 3.0 (1.9)-moz [2] No support No support 9[3](bug)
fill-available This is an experimental API that should not be used in production code. 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 This is an experimental API that should not be used in production code. ? No support ? ? ? 9[3](bug)
fill-available This is an experimental API that should not be used in production code. ? 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.

Vegeu també