Colunas de altura 100% com CSS

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.

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 tranquilos porque é muito simples.

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

Fonte: http://www.criarweb.com/artigos/colunas-de-altura-100-com-css.html