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