
La propiedad height en CSS establece la altura de un elemento. De forma predeterminada, esta propiedad se usa para especificar la altura del área de contenido, pero si la propiedad box-sizing
se establece en ella, border-box
establece la altura del elemento comenzando desde el borde exterior del marco.
Funciones height css
Valor inicial | auto |
---|---|
Aplicado a | Todos los elementos, excepto los elementos en línea no reemplazados, las columnas de la tabla y los grupos de columnas. |
Heredable | No |
Móvil | Sí |
Valor calculado | Porcentaje (%), longitud absoluta o palabra reservada auto . |
/* es una palabra reservada */ height: auto ; /* <length> longitudes */ height: 120px ; height: 10em ; /* <porcentaje> porcentajes */ height: 75 %; /* valores globales */ height: inherit; height: initial; height: unset;
Beneficios importantes min-height
y max-height
tienen prioridad sobre la propiedad height
.
Ejemplos y aplicaciones en código
En el siguiente ejemplo, intentaremos usar la propiedad height
para establecer la altura de varios elementos <div>
, usando longitudes absolutas <length>
y porcentajes (desde la altura del contenedor del elemento objetivo):
<div class="height-50px"> <code>height: 50px;</code> </div> <div class="height-3em"> <code>height: 3em;</code> </div> <div id="parent"> <div id="child"> <code>height: 50%;</code> (la mitad de la altura del elemento padre ) </ div > </ div >
Código CSS:
div { box-sizing: border-box; margin-bottom: 1em; padding: 0.5em; border: 1px solid black; } .height-50px { height: 50px; } .height-3em { height: 3em; } #parent { height: 100px; } #child { height: 50%; width: 50%; }
Soporte de navegadores
Característica | Chrome | Firefox | IE | Ópera | Safari |
---|---|---|---|---|---|
Soporte básico | 1.0 | 3,0 | 4.0 | 4.0 | 1.0 |
Características generales
<length>
Determina la altura en longitudes absolutas.
<percentage>
Especifica la altura como porcentaje de la altura del elemento de bloque que contiene el elemento actual.
auto
El navegador calculará automáticamente el valor de altura del elemento.
Estructura height css
height: auto | [ <length> | <percentage> ];
Consulte también
- La página de propiedades
box-sizing
que se utiliza para modificar el modelo de caja predeterminado. - La página de propiedades
width
que especifica el ancho de los elementos.
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-position en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Característica Box Sizing en CSS
- Característica box-shadow en CSS
- Característica de Border en CSS
- Característica de Opacity en CSS
- Característica del Background en CSS
- Característica del Color en el CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Característica del Margin en CSS
- Característica del Overflow en CSS
- Característica del Padding en CSS
- Características align-content en CSS
- Características align-items en CSS
- Características align-self en CSS
- Características border-bottom-left-radius en CSS
- Características border-bottom-right-radius en CSS
- Características border-image-width en CSS
- Características border-left en CSS