Características height en CSS

Características height en CSS
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 inicialauto
Aplicado aTodos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas.
HeredableNo
Móvil
Valor calculadoPorcentaje (%), 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-heightmax-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ísticaChromeFirefoxIEÓperaSafari
Soporte básico1.03,04.04.01.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.