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.

* MDN Entender las WCAG, explicaciones de la directriz 1.4
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
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,∞]> )    
  
<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 with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

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