Propiedad min-height
La propiedad min-height establece
la altura mínima de un elemento. Los valores de la propiedad
pueden ser cualquier unidad
de tamaño o la palabra clave none,
que significa que no hay valor establecido.
Normalmente se establece para un elemento con ancho fluido (la altura se establece en porcentajes o no se establece en absoluto, y el elemento se expande en altura por su contenido).
Si se establece una altura mínima, el elemento no podrá
ser más pequeño que esta altura. Si
hay menos texto del necesario para alcanzar la min-height,
el elemento tendrá la altura de min-height.
Si hay más texto, la altura del elemento se calculará en función de la cantidad de texto.
Sintaxis
selector {
min-height: valor;
}
Ejemplo
En este ejemplo, la altura no está establecida en absoluto
y será calculada por el navegador automáticamente
en función de la cantidad de texto. Sin embargo,
como se establece la propiedad min-height,
la altura no se reducirá por debajo de este valor,
incluso si no hay texto en él:
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
}
:
Ejemplo
Añadamos más texto al elemento - para que se produzca un desbordamiento del bloque en altura. En este caso, nuestro bloque simplemente aumentará su altura:
<div id="elem">
some long text
</div>
#elem {
min-height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Ejemplo
Para comparar, veamos qué le sucede
al bloque si le quitamos la altura mínima
y en su lugar establecemos la propiedad height:
<div id="elem">
some long text
</div>
#elem {
height: 100px;
width: 300px;
border: 1px solid black;
text-align: justify;
margin-bottom: 50px;
}
:
Véase también
-
la propiedad
max-height,
que establece la altura máxima de un elemento -
la propiedad
max-width,
que establece el ancho máximo de un elemento -
la propiedad
min-width,
que establece el ancho mínimo de un elemento