Características height en CSS

La propiedad height en CSS establece la altura de un elemento. De forma predeterminada, esta propiedad se usa para especificar la altura del área de contenido, pero si la propiedad box-sizing se establece en ella, border-box establece la altura del elemento comenzando desde el borde exterior del marco.

Funciones height css

Valor inicial	`auto`
Aplicado a	Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas.
Heredable	No
Móvil	Sí
Valor calculado	Porcentaje (%), longitud absoluta o palabra reservada `auto`.

/* es una palabra reservada */ 
height:  auto ;
/* <length> longitudes */ 
height:  120px ; 
height:  10em ;
/* <porcentaje> porcentajes */ 
height:  75 %;
/* valores globales */ 
height: inherit;
height: initial;
height: unset;

Beneficios importantes min-height y max-height tienen prioridad sobre la propiedad height.

Ejemplos y aplicaciones en código

En el siguiente ejemplo, intentaremos usar la propiedad height para establecer la altura de varios elementos <div>, usando longitudes absolutas <length> y porcentajes (desde la altura del contenedor del elemento objetivo):

<div class="height-50px">
   <code>height: 50px;</code>
</div>
<div class="height-3em">
  <code>height: 3em;</code>
</div>
<div id="parent">
  <div id="child">
    <code>height: 50%;</code>  (la mitad de la  altura del  elemento  padre ) 
  </ div > 
</ div >

Código CSS:

div {
  box-sizing: border-box;
  margin-bottom: 1em;
  padding: 0.5em;
  border: 1px solid black;
}
.height-50px {
  height: 50px;
}
.height-3em {
  height: 3em;
}
#parent {
  height: 100px;
}
#child {
  height: 50%;
  width: 50%;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	1.0	3,0	4.0	4.0	1.0

Características generales

<length>

Determina la altura en longitudes absolutas.

<percentage>

Especifica la altura como porcentaje de la altura del elemento de bloque que contiene el elemento actual.

auto

El navegador calculará automáticamente el valor de altura del elemento.

Estructura height css

height: auto | [ <length> | <percentage> ];

Consulte también

La página de propiedades box-sizing que se utiliza para modificar el modelo de caja predeterminado.
La página de propiedades width que especifica el ancho de los elementos.