Inércia Sensorial

Esticar uma caixa verticalmente com CSS

Comments 10 de November, 2005 sob CSS.
Tags: css » tutorial »

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%;
}

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".

PLAIN TEXT

CSS: