--- title: height slug: Web/CSS/height tags: - Propiedad CSS - Referencia translation_of: Web/CSS/height ---
{{CSSRef}}

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 {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.

{{cssinfo}}

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 {{cssxref("<length>")}} para unidades disponibles.
<percentage>
Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la altura del bloque contenedor
border-box {{experimental_inline}}
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.
content-box {{experimental_inline}}
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<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 {{experimental_inline}}
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content {{experimental_inline}}
La altura preferida intrínseca.
min-content {{experimental_inline}}
La altura mínima intrínseca.
available {{experimental_inline}}
La altura del bloque contenedor menos su margen vertical, borde y padding.
fit-content {{experimental_inline}}
El mayor entre:

Sintaxis formal

{{csssyntax}}

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

{{EmbedLiveSample('Example')}}

Especificaciones

Especificación Estado Comentarios
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} {{Spec2('CSS3 Box')}} Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} {{Spec2('CSS3 Transitions')}} Incluye height como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} Añade soporte para valores {{cssxref("<length>")}} y especifica a qué elementos es aplicable.
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} Definición inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Añade nuevas palabras clave de tamaño para width y height

Compatibilidad de navegadores

{{CompatibilityTable}}

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 1.0 {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
fill, fit-content, min-content, max-content {{CompatChrome(46.0)}}        
Característica Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Soporte básico 1.0 {{CompatVersionUnknown}} {{CompatGeckoMobile("1")}} 6.0 6.0 1.0 {{CompatVersionUnknown}}
fill, fit-content, min-content, max-content {{CompatUnknown}} {{CompatChrome(46.0)}}         {{CompatChrome(46.0)}}

Véase también