height

La propiedad CSS height especifica la altura de un elemento. Por defecto, la propiedad define la altura del área de contenido. Sin embargo, si box-sizing está configurado como border-box, determina la altura del área de borde.

Pruébalo

Las propiedades min-height y max-height anulan a la propiedad height .

Sintaxis

css
/* Valores de longitud */
height: 120px;
height: 10em;

/* Valores de porcentaje */
height: 75%;

/* Valores con palabras clave */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

/* Valores globales */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Valores

<length>

Define la altura como un valor absoluto.

<percentage>

Define la altura como un porcentaje de la altura del bloque contenedor.

auto

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

max-content

La altura preferida intrínseca.

min-content

La altura mínima intrínseca.

fit-content

La caja (box en la demo de prueba de arriba) usará todo el espacio disponible, pero nunca más de lo indicado por max-content .

fit-content(<length-percentage> (en-US))

Utiliza la fórmula fit-content con el espacio disponible sustituido por el argumento especificado, es decir min(max-content, max(min-content, <length-percentage>))

clamp() (en-US)

Permite seleccionar un valor medio dentro de un rango de valores entre un mínimo y un máximo definidos.

Problemas de accesibilidad

Asegúrese de que los elementos definidos con height no se truncan y/o no oscurecen otros contenidos cuando la página se amplía para aumentar el tamaño del texto.

Definición formal

Valor inicialauto
Applies toelementos de bloque o remplazados
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.
Valor calculadoa percentage or auto or the absolute length
Animation type (en-US)a length, percentage or calc();

Sintaxis formal

height = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  

<length-percentage> = 
  <length>      |
  <percentage>

Ejemplos

Fijación de la altura mediante píxeles y porcentajes

HTML

html
<div id="taller">Yo tengo 50 píxeles.</div>
<div id="shorter">Yo tengo 25 píxeles de altura.</div>
<div id="parent">
  <div id="child">Yo tengo la mitad de altura de mi padre</div>
</div>

CSS

css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

Result

Especificaciones

Specification
CSS Box Sizing Module Level 3
# preferred-size-properties
CSS Box Sizing Module Level 4
# sizing-values

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también