Com CSS podemos fazer muitas coisas de uma maneira rápida e simples. Porém, muitas vezes temos que empregar técnicas, algumas simples e outras nem tanto, para conseguir efeitos que de outra maneira são impossíveis. É o caso que falaremos neste artigo, conseguir que as colunas em uma construção CSS ocupem o 100% da altura disponível. Ou seja, ter uma página construída com várias colunas, onde todas cheguem até a parte de baixo da página.

Talvez você tenha chegado a este artigo porque não consegue um height: 100% em uma coluna ao desenhar sua página com CSS e não necessite mais explicações do que pretendemos conseguir. Porém, se não for o caso e deseja ver um exemplo de como se faria uma construção CSS com duas colunas, acesse ao artigo de CriarWeb.com Construção CSS com duas colunas. Logo, dê uma olhada na página do exemplo que se desenvolve no artigo anterior.

Você verá que a coluna que tem uma espécie de barra de navegação lateral só ocupa uma área limitada do espaço que há em vertical. Isto é porque em CSS as camadas DIV crescem verticalmente justamente o necessário, atendendo aos conteúdos que têm que se colocar dentro. Por muito que tentemos colocar um estilo CSS height:100% à camada da coluna pequena, à princípio, não conseguiremos que ocupe o mesmo espaço que a coluna grande. Porém, há uma solução a tudo isto e podemos estar tranqüilos porque é muito simples.

Antes de continuar, pode ver o exemplo de construção CSS que vamos explicar neste artigo.

O pequeno truque de construção consiste em simular as colunas com um fundo. Na verdade vamos ter colunas normais, com camadas DIV transparentes, porém vamos situá-las sobre um fundo de cor que será o que ofereça o acabado em coluna.

O fundo para simular as colunas

Criaremos o fundo com o espaço que nós desejarmos, ou seja, definiremos no fundo a distribuição em colunas que necessitemos para nosso projeto. Faremos um fundo como este:

Como se pode ver na imagem, temos uma barra que tem várias colunas, ao se repetir na vertical fará uma coluna tão alta como os conteúdos que requeiram a página.

Para colocar a imagem de fundo, no body ou no container onde quisermos simular as colunas, faremos um CSS como este:

background: #f0f0f0 url(fundo.gif) repeat-y 50%;

O atributo css tem um valor position, que neste caso é 50%, com o qual conseguimos que o fundo se centralize na página.

Criamos as colunas com camadas flutuando à esquerda e à direita

Logo, seria só criar um container que apareça no centro da página e um par de colunas esquerda e direita, onde estejam flutuando cada uma para seu lado. Em outros artigos de criarweb.com vimos como fazer estas cosas com CSS.

O código HTML ficaria assim:

<div id="container">
   <div id="esquerda">
      Coluna da esquerda
   </div>
   <div id="direita">
      Esta coluna da direita
   </div>
</div>

O código CSS do exemplo seria como este:

body {
   background: #f0f0f0 url(fundo.gif) repeat-y 50%;
   text-align: center;
}
#container{
   margin:auto;
   text-align:left;
   width: 1000px;
}
#esquerda{
   width: 670px;
   float: left;
   margin: 10px 0px 10px 10px;
}
#direita{
   width: 290px;
   float: right;
   margin: 10px 5px 10px 0px;
}

Não tem muito mistério, sobretudo se já seguimos outros workshops publicados em criarweb.com sobre como construir webs com CSS. Aconselhamos seguir a linha de artigos que começa pelo artigo Construção CSS.

Finalmente, passamos o link para ver o exemplo em funcionamento.