Propriedade min-height

A propriedade min-height define a altura mínima de um elemento. Os valores da propriedade são quaisquer unidades de tamanho ou a palavra-chave none, que significa a ausência de valor.

Geralmente é definida para um elemento com largura fluida (a altura é definida em porcentagem ou não é definida de todo, e o elemento se expande em altura conforme seu conteúdo).

Se uma altura mínima for definida, o elemento não poderá ficar menor do que essa altura. Se houver menos texto do que o necessário para min-height, o elemento terá a altura de min-height.

Se houver mais texto - a altura do elemento será calculada de acordo com a quantidade de texto.

Sintaxe

seletor {
	min-height: valor;
}

Exemplo

Neste exemplo, a altura não está definida e será calculada pelo navegador automaticamente, dependendo da quantidade de texto. No entanto, como a propriedade min-height foi definida, a altura não será reduzida abaixo desse valor, mesmo que não haja texto dentro dele:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

Exemplo

Vamos adicionar mais texto ao elemento - o suficiente para que o bloco transborde em altura. Neste caso, nosso bloco simplesmente aumentará sua altura:

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

Exemplo

Para comparação, vamos ver o que acontece com o bloco se removermos a altura mínima e, em seu lugar, definirmos a propriedade height:

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}

Veja também

a propriedade max-height,
que define a altura máxima de um elemento
a propriedade max-width,
que define a largura máxima de um elemento
a propriedade min-width,
que define a largura mínima de um elemento