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 inicialauto
Applies toall elements but non-replaced inline elements, table columns, and column groups
Heredableno
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
Valor calculadoa percentage or auto or the absolute length
Animatableyes, 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 orderel 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><percentage> precedente es aplicado a los límites del borde del elemento.
content-box 
Si está presente, el valor <length><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

Compatibilidad de navegadores

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

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: israel-munoz, teoli, Mgjbot, Nathymig, HenryGR
 Última actualización por: israel-munoz,