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 value (en-US)auto
Applies toall elements but non-replaced inline elements, table columns, and column groups
Inherited (en-US)no
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.
Computed value (en-US)a percentage or auto or the absolute length
Animation typea length, percentage or calc();

Sintaxi

Valors

<length> (en-US)
Defineix l'alçada com un valor absolut.
<percentage> (en-US)
Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.
border-box  This is an experimental API that should not be used in production code.
Si està present, s'aplica abans <length> (en-US) o <percentage> (en-US) a la caixa de vora de l'element.
content-box  This is an experimental API that should not be used in production code.
Si està present, s'aplica abans <length> (en-US) o <percentage> (en-US) a la caixa de contingut de l'element.
auto
El navegador calcularà i seleccionarà una alçada per a l'element especificat .
fill This is an experimental API that should not be used in production code.
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  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.
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 farciment.
fit-content  This is an experimental API that should not be used in production code.
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

auto | (en-US) <length> (en-US) | (en-US) <percentage> (en-US) | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)
where 
<length-percentage> = <length> (en-US) | (en-US) <percentage> (en-US)

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.		 Candidate Recommendation 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> (en-US) i especifica en quin element s'aplica.
CSS Level 1
The definition of 'height' in that specification.		 Recommendation Definició inicial
CSS Box 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! (en-US)

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é