Colunas de altura 100% com CSS

Como construir uma página com CSS e conseguir que a altura das colunas ocupe todo o espaço disponível da página.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 09/2/09
Valorize este artigo:
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.

Referência: Deixamos aqui um link a uma faq sobre CSS que tem relação com este artigo e que talvez interesse também ler para encontrar outros truques relacionados com camadas <div> de height: 100%.

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:


Nota: a imagem do fundo está distorcida no tamanho, para que caiba nesta página e se possa ler bem o artigo. Nosso fundo original mede 1280x50 pixels e está criado com espaços otimizados para definições de tela de 1024 pixels de largura ou superior.

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.





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato