height

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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>): 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(): 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 inicial	`auto`
Applies to	elementos de bloque o remplazados
Heredable	no
Percentages	The 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 calculado	a percentage or `auto` or the absolute length
Animation type	a length, percentage or calc();

Sintaxis formal

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

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

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <intrinsic-size-keyword>  |
  <calc-size()>             |
  any                       |
  <calc-sum>                

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

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

El modelo de caja
width
box-sizing
min-height
Las propiedades lógicas asignadas: block-size, inline-size