Desenvolvimento - CSS
Preenchendo completamente as colunas na vertical em um layout tableless
por Éderson Cássio Lacerda Ferreira
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:
Colunas.htm
<?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:
Colunas.css
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:
Colunas.js
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á”? ;)
Aprenda mais sobre CSS acessando o curso online Introdução ao CSS.
