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
/* 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-element> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-element> =
<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
<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
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