height

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 valueauto
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 value computes to auto. A percentage height on the root element is relative to the initial containing block.
Mediavisual
Computed valuea percentage or auto or the absolute length
Animation typea length, percentage or calc();
Canonical orderthe 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ària fill-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.

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

Vegeu també