height

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

La propiedad CSSheight especifica la altura de un elemento. Por defecto, la propiedad define la altura delárea de contenido. Sin embargo, sibox-sizing está configurado comoborder-box, determina la altura delárea de borde.

Pruébalo

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section>  <div>    This is a box where you can change the height.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  justify-content: center;  color: #ffffff;}

Las propiedadesmin-height ymax-height anulan a la propiedadheight .

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 pormax-content .
fit-content(<length-percentage>): Utiliza la fórmulafit-content con el espacio disponible sustituido por el argumento especificado, es decirmin(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 conheight 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	alength,percentage or calc();

Sintaxis formal

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

<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> =
<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>Yo tengo 50 píxeles.</div><div>Yo tengo 25 píxeles de altura.</div><div>  <div>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%;}