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

cssseletor {
  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:

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

css#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:

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

css#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:

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

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

Результат:

Veja também