height

Resumen

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

Las propiedades min-height y max-height sobreescriben el valor de height.

Valor inicial	`auto`
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Heredable	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
Valor calculado	a percentage or `auto` or the absolute length
Animatable	yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	el orden único no-ambigüo definido por la gramática formal

Sintaxis

/* Valores clave */
height: auto;

/* Valores <length> */
height: 120px;
height: 10em;

/* Valores <percentage> */
height: 75%;

/* Valores globales */
height: inherit;
height: initial;
height: unset;

Valores

<length>

Ver <length> para unidades disponibles.

<percentage>

Especificado con el tipo <percentage> como porcentaje de la altura del bloque contenedor

border-box

Si está presente, el valor <length> o <percentage> precedente es aplicado a los límites del borde del elemento.

content-box

Si está presente, el valor <length> o <percentage> precedente será aplicado a los límites de contenido del elemento.

auto

El navegador calculará y seleccionará la altura para el elemento especificado.

fill

Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.

max-content

La altura preferida intrínseca.

min-content

La altura mínima intrínseca.

available

La altura del bloque contenedor menos su margen vertical, borde y padding.

fit-content

El mayor entre:

la altura mínima intrínseca
la menor entre la altura prefereida intrínseca y la altura disponible

Sintaxis formal

[ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

Ejemplo

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%;
}

Especificaciones

Especificación	Estado	Comentarios
CSS Basic Box Model The definition of 'height' in that specification.	Working Draft	Añade las palabras clave `max-content`, `min-content`, `available`, `fit-content`, `border-box`, `content-box`.
CSS Transitions The definition of 'height' in that specification.	Working Draft	Incluye `height` como propiedad que puede ser animada.
CSS Level 2 (Revision 1) The definition of 'height' in that specification.	Recommendation	Añade soporte para valores `<length>` y especifica a qué elementos es aplicable.
CSS Level 1 The definition of 'height' in that specification.	Recommendation	Definición inicial
CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of 'width' in that specification.	Working Draft	Añade nuevas palabras clave de tamaño para `width` y `height`

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	1.0	1.0 (1.7 or earlier)	4.0	7.0	1.0
`fill`, `fit-content`, `min-content`, `max-content`	46.0

Característica	Android	Android Webview	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Soporte básico	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0	(Yes)
`fill`, `fit-content`, `min-content`, `max-content`	?	46.0					46.0

Véase también

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