Uma dúvida que talvez já tenha
passado por sua cabeça: como preencher completamente com uma cor de fundo as
colunas de um layout tableless, desde o topo até o pé?
Como sabemos, o browser “pinta”
as colunas somente até a altura que for utilizada, seja definida pela
propriedade height ou pela extensão do conteúdo. Se estivermos gerando
conteúdo dinamicamente, não temos como saber de antemão qual será a medida
exata da altura de cada coluna. Precisaríamos dispor de um meio de determinar
isso dinamicamente, e isso é facilmente resolvido com um pouco de JavaScript.
Fig. 1 – O que o
browser faz
Fig. 2 - O que
gostaríamos que ele fizesse
Começaremos pelo código HTML:
<?xml
version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout</title>
<link
rel="stylesheet" href="colunas.css"
type="text/css" />
<script
language="JavaScript" type="text/javascript"
src="colunas.js"></script>
</head>
<body onload="dimensionarColunas(['col1',
'col2'])">
<div
id="total">
<div
id="topo">Topo</div>
<div
id="col1">
Menu <br />
Menu <br />
Menu <br />
</div>
<div id="col2">
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
Conteúdo Conteúdo Conteúdo Conteúdo
Conteúdo Conteúdo Conteúdo <br />
</div>
<div
id="inferior">Inferior</div>
</div>
</body>
</html>
Agora o arquivo CSS que irá definir
o layout:
body {
text-align: center;
}
#total {
margin: 0 auto 0 auto;
width: 800px;
}
#topo {
height: 75px;
background: #FFFFC0;
}
#col1 {
background: #C0FFC0;
float: left;
width: 150px;
text-align: left;
}
#col2 {
float: left;
width: 650px;
text-align: left;
background: #C0FFFF;
}
#inferior {
float: left;
width: 100%;
background: #C0C0FF;
}
Obs.: as cores de fundo
que usei aqui servem somente para melhor visualização de cada div.
Finalmente, o código JavaScript
que executará a tarefa de dimensionar as colunas de maneira igual:
function dimensionarColunas(colunas) {
maior = 0;
for (i = 0; i <
colunas.length; i++) {
alturaReal =
document.getElementById(colunas[i]).offsetHeight;
if (alturaReal
> maior) {
maior = alturaReal;
}
}
for (i = 0; i <
colunas.length; i++) {
document.getElementById(colunas[i]).style.height = maior + "px";
}
}
Perceba que esta função foi
chamada no evento onload da página:
<body
onload="dimensionarColunas(['col1', 'col2'])">
Ela recebe como parâmetro um
array com os id’s das colunas. Se tivéssemos mais colunas, bastaria passar os id’s:
<body
onload="dimensionarColunas([ 'uma_coluna', 'outra_coluna', 'mais_uma'
])">
Entendendo a função dimensionarColunas
A função que dimensiona as
colunas é bastante curta e simples. O grande pulo-do-gato é a propriedade offsetHeight,
que lê a altura real de um objeto após sua renderização pelo browser. É
através dela que sabemos quanto mede cada coluna após acomodar seu conteúdo.
Analogamente, também temos a propriedade offsetWidth para medir a
largura (mas não precisamos dela pois as colunas possuem largura fixa definida
no código CSS).
Primeiramente, é feita uma
varredura (loop) no array de colunas a fim de se saber qual é a mais alta. Em
seguida, já tendo a medida da coluna mais alta, outro loop é feito atribuindo
essa medida a todas elas.
Como dizemos aqui em Minas, “teve
bão ou quá”? ;)