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