Esticar uma caixa verticalmente com CSS

Quando você quer esticar uma caixa via CSS para ocupar todo um espaço vertical, a solução mais óbvia é fazer:

[css].classe {
width:100%;
}[/css]

E funciona na maioria das vezes. Entretanto, quando o doctype está em modo strict, a caixa não esticará para preencher todo o espaço.

Isso acontece porque no modo strict, uma caixa tem o tamanho do conteúdo dela. Para deixá-la ocupar todo o espaço disponível, a “caixa-pai”, ou a que contém a caixa que precisamos esticar, também deve ter height:100%.

Quando nossa caixa está dentro de um <td>, ou <div>, é fácil, basta colocar na caixa-pai o estilo. Mas quando ela está dentro do <body>, é essa tag que deve receber o height:100%, pois o <body> é também uma “caixa”.

[css]body {
height:100%;
}[/css]

E pronto! Esteja dentro do <body> ou dos tipos mais comuns de caixas, você pode esticá-la para ocupar todo o espaço disponível na tela.


Posted

in

by

Tags:

Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.