Definición de .min-height en CSS
La propiedad .min-height en CSS se usa para establecer la altura mínima de un elemento especificado. La propiedad .min-height siempre anula la altura y la altura máxima. Los autores pueden usar cualquiera de los valores de longitud siempre que sean un valor positivo.
Caso de uso : propiedad CSS min-height
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de la siguiente forma:
.wrapper {
height: 100%; /* full height of the content box */
min-height: 20em; /* Will be AT LEAST 20em tall */
}
.wrapper {
height: 600px;
min-height: 400px; /* Will be AT LEAST 400px tall : overrides height */
}
.wrapper {
min-height: 400px; /* overrides height and max-height */
height: 200px;
max-height: 300px;
}Otro ejemplo más avanzado de .min-height es el siguiente de CODEPEN:
Sintaxis de .min-height en CSS
min-height: length|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| longitud | El valor por defecto es 0. Define la altura mínima en px, cm, etc. | |
| % | Define la altura mínima en porcentaje del bloque contenedor | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .min-height
Los números de la tabla especifican la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| min-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 4.0 |
