La propietat CSS height
especifica l'alçada d'un element. Per defecte, la propietat defineix l'alçada de l'àrea de contingut. Si box-sizing
s'estableix a border-box
, aquest determina l'alçada de l'àrea de vora.
/* Keyword value */
height: auto;
/* <length> values */
height: 120px;
height: 10em;
/* <percentage> value */
height: 75%;
/* Global values */
height: inherit;
height: initial;
height: unset;
Les propietats min-height
i max-height
anul·la height
.
Initial value | auto |
---|---|
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 value computes to auto . A percentage height on the root element is relative to the initial containing block. |
Media | visual |
Computed value | a percentage or auto or the absolute length |
Animation type | a length, percentage or calc(); |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Sintaxi
Valors
<length>
- Defineix l'alçada com un valor absolut.
<percentage>
- Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.
border-box
- Si està present, s'aplica abans
<length>
o<percentage>
a la caixa de vora de l'element. content-box
- Si està present, s'aplica abans
<length>
o<percentage>
a la caixa de contingut de l'element. auto
- El navegador calcularà i seleccionarà una alçada per a l'element especificat .
- fill
- Utilitzeu la grandària
fill-available
en línia o la grandàriafill-available
del bloc, segons correspongui a la modalitat d'escriptura. max-content
- L'alçada preferida intrínseca.
min-content
- L'alçada mínima intrínseca.
available
- L'alçada del bloc contenidor menys el marge vertical, la vora i el farciment.
fit-content
- El més gran de:
- l'alçada mínima intrínseca.
- la menor de l'alçada intrínseca preferida i l'alçada disponible.
Sintaxi formal
[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
Exemple
HTML
<div id="red">
<span>I'm 50 pixels tall.</span>
</div>
<div id="green">
<span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
<div id="child">
<span>I'm half the height of my parent.</span>
</div>
</div>
CSS
div {
width: 250px;
margin-bottom: 5px;
border: 3px solid #999999;
}
#red {
height: 50px;
}
#green {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
Especificacions
Especificació | Estat | Comentari |
---|---|---|
CSS Basic Box Model The definition of 'height' in that specification. |
Working Draft | S'han afegit les paraules clau max-content , min-content , available , fit-content , border-box , content-box |
CSS Transitions The definition of 'height' in that specification. |
Working Draft | Mostra height com a animable. |
CSS Level 2 (Revision 1) The definition of 'height' in that specification. |
Recommendation | Afegeix suport per als valors <length> i especifica en quin element s'aplica. |
CSS Level 1 The definition of 'height' in that specification. |
Recommendation | Definició inicial |
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification. |
Working Draft | Afegeix noves paraules clau de grandària per width i height. |
Navegadors 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 |
---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 7.0 | 1.0 |
fill , fit-content , min-content , max-content |
46.0 | ? |
Descripció | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Suport bàsic | 1.0 | (Yes) | (Yes) | 1.0 (1) | 6.0 | 6.0 | 1.0 | (Yes) |
fill , fit-content , min-content , max-content |
? | 46.0 | ? | 46.0 |