This translation is incomplete. Please help translate this article from English.
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
| 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.