Home Tutoriais Desenvolvimento 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.

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 1280×50 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;
}

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

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.