As propriedades CSS height, min-height e max-height
Introdução
As propriedades height, min-height e max-height se destinam a definir a altura dos boxes.
Valores válidos para a propriedades que definem alturas
- comprimento: um valor CSS para comprimento (px, em, pt, etc)
- porcentagem: um valor expressso em porcentagem;
- auto: um valor que depende dos conteúdos inseridos no box (valor inicial da propriedade);
Valores declarados com uso de porcentagem são calculados em relação à altura (height) do bloco de conteúdo (o elemento-pai do box).
Não é válido declarar valores negativos para height.
Na prática usam-se as propriedades min-height e max-height em conjunto com a propriedade height com a finalidade de estabelecer valores mínimo e máximo para uma altura definida em porcentagem.
height em px
<div>Eu sou um elemento DIV com 200px de altura.</div>
div {
height: 200px;
background: skyblue;
}
A renderização do código acima é conforme mostrado a seguir:
height em %
<div> /* div com borda na cor laranja com 300px de altura */
<div>Eu sou um elemento DIV com 50% de altura.</div>
</div>
div {
height: 70%;
background: skyblue;
}
A renderização do código acima é conforme mostrado a seguir:
Nota: A altura definida em porcentagem tem como base de cálculo a altura do elemento-pai e para que funcione é preciso que a altura do elemento-pai seja explicitamente definida. Leia o tutorial Por que height: 100% não funciona?.
height auto
<div>Eu sou um elemento DIV com altura de valor auto. Lorem...</div>
div {
height: auto;
background: skyblue;
}
A renderização do código acima é conforme mostrado a seguir:
A altura do box é aquela necessária para acomodar a quantidade de texto nele inserido. Este é o valor inicial (padrão) da propriedade height.
max-height
<div>Lorem...</div>
div {
max-height: 300px;
overflow-y: scroll;
background: skyblue;
}
A renderização do código acima é conforme mostrado a seguir:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.
Curabitur hendrerit erat ut augue. Cras gravida. Mauris consequat aliquam leo. Aenean non tortor id metus aliquet consectetuer. Quisque sodales lectus ac orci. Donec eleifend fringilla mi. Vivamus vel massa. Aenean interdum pellentesque sem. Nulla pellentesque felis et tortor. Duis cursus, dui non dictum tincidunt, wisi ipsum mollis wisi, nec ornare velit ipsum eget enim. In sed felis. Phasellus condimentum sodales nulla. Etiam orci leo, rutrum malesuada, congue vel, fringilla vitae, lorem. Pellentesque ligula.
min-height
<div>DIV</div>
div {
min-height: 300px;
background: skyblue;
}
A renderização do código acima é conforme mostrado a seguir:
Compartilhe essa matéria com seus amigos
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.