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	`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à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.

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!

Desktop
Mobile

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é

model de caixa, width, box-sizing, min-height, max-height