As técnicas CSS para posicionamento do rodapé do site na parte inferior da página são bem conhecidas e documentadas. Se o layout é de uma coluna, basta inserir a marcação para o rodapé logo após a marcação da coluna e o próprio esquema de renderização dos boxes CSS se encarrega de "empurrar" o rodapé para a posição imediatamente após a coluna.
Quando se trata de layouts multicolunares nos quais usamos a propriedade CSS float a tarefa de posicionar o rodapé requer a técnica conhecida como "clear floats" que consiste no uso da propriedade CSS clear para forçar o rodapé para uma posição imediatamente após as colunas.
Para o entendimento deste tutorial é pré-requisito o conhecimento com detalhes das técnicas de posicionamento do rodapé mencionadas acima.
Quando a página não preenche toda a altura da janela do navegador, pelo fato de que a quantidade de conteúdos não é extensa e consequentemente não havendo barra de rolagem vertical, a aplicação das técnicas de posicionamento do rodapé faz com que apareça um espaço vago entre o limite inferior do rodapé e o limite inferior da janela do navegador.
Este tutorial se propõe a mostrar a técnica CSS para solucionar o problema, forçando o rodapé para a posição no limite inferior da janela quando não há barra de rolagem. Trata-se de um acréscimo nas conhecidas regras de estilo de posicionamento do rodapé com a finalidade de obter o efeito desejado.
Neste link você poderá visualizar o problema e neste link a solução.
Seja qual for o layout, uma coluna ou multicolunar, para obter o efeito desejado temos que planejar a marcação do documento segundo as seguintes diretrizes:
Nota:Os nomes das divs mostrados acima, são os que adotamos nos exemplos que ilustram este tutorial.
A estrutura de marcação é mostrada a seguir:
...
<body">
<div id="tudo">
<div id="topo"></div>
<div id="conteudo">
...aqui entra(m) a(s) coluna(s) do layout.
</div> <!-- Fim div#conteudo -->
<div id="rodape"></div>
</div> <!-- Fim div#tudo -->
</body>
</html>Para ilustrar este tutorial usaremos como ponto de partida um layout fixo com topo, rodapé e duas colunas de conteúdos marcadas como div#principal e div#auxiliar sendo esta destinada à navegação e aquela aos conteúdos dos assuntos tratados em cada página.
O layout é construido usando a técnica de flutuar a coluna principal à esquerda e a coluna auxiliar à direita e adotando uma div#clear logo após as colunas flutuadas com a finalidade de "empurrar" o rodapé para baixo (Sim, eu sei que existem técnicas para obter "clear floats" sem uso de marcação adicional e você poderá usá-las se assim preferir).
Conforme já foi dito no início, é pré-requisito para entendimento deste tutorial que você conheça a construção deste layout e assim não vou entrar em detalhes de construção do layout inicial. Para uma revisão e explicação detalhada ver a matéria Layout CSS de 2 colunas com faux column.
A estrutura de marcação com o acréscimo para obter o layout inicial é a seguinte:
...
<body">
<div id="tudo">
<div id="topo"></div>
<div id="conteudo">
<div id="principal">
...conteúdos da coluna principal...
</div> <
<div id="auxiliar">
...conteúdos da coluna auxiliar...
</div> <
<div id="clear"></div>
</div> <!-- Fim div#conteudo -->
<div id="rodape"></div>
</div> <!-- Fim div#tudo -->
</body>
</html>Notar que em relação à marcação para um layout convencional houve o acréscimo da div#conteudo para container de tudo que está entre o topo e o rodapé e a inserção da div#clear uma vez que o rodapé foi colocado fora da div#conteudo e não poderá ser usado para a função "clear floats".
Veja em uma página com pouco conteúdo a renderização e as respectivas regras CSS do layout inicial e a seguir veja em uma página com muito conteúdo a renderização do mesmo layout (sugestão: inspecione o código fonte das páginas para visualizar a marcação e as regras CSS).
Vamos considerar a página com pouco conteúdo que você já deve ter visitado conforme referenciada no link na seção anterior. Nosso primeiro passo é estender as duas colunas de conteúdos até a parte inferior da janela do navegador. Para isto acresentamos as seguintes regras CSS à folha de estilo:
html, body {
height: 100%;
}
#tudo {
min-height: 100%;
...
}
/* hack para IE6 que trata height como min-height */
* html #tudo {
height: 100%;
}O acréscimo destas regras causa o efeito de estender as colunas de conteúdo sem alterar a posição do rodapé conforme mostrado nesta página 3 de exemplo.
Para posicionar o rodapé "empurrando-o" para o limite inferior da janela usaremos posicionamento absoluto acrescentando as seguintes regras CSS:
#tudo {
position: relative;
...
}
#rodape {
position: absolute;
bottom: 0;
}
O acréscimo destas regras causa o efeito de "empurrar o rodapé para o limite inferior da janela conforme mostrado nesta página 4 de exemplo.
Resolvido o problema? Não, ainda não está resolvido, pois embora tudo tenha funcionado a contento para páginas com pouco conteúdo veja o que acontece nesta página 5 de exemplo se inserirmos mais conteúdos forçando o aparecimento de uma barra de rolagem.
Se não observou, volte ao link anterior e role até o fim da página. Observe agora que o rodapé está posicionado no final da página, mas sobre os conteúdos da colunas.
Temos que abrir um espaço vertical no final, para encaixar o rodapé. Conseguimos este espaço declarando um padding para a div#conteudo . Como o rodapé tem 20px de altura, podemos declarar 30px para aquele padding assegurando um espaçamento extra de 10px entre o final do conteúdo e o início do rodapé. O acréscimo na folha de estilo é:
#conteudo {
padding-bottom: 30px;
}E finalmente o rodapé corretamente posicionado conforme proposto no início do tutorial nesta página com pouco conteúdo e nesta página com muito conteúdo.
Esta técnica foi originalmente desenvolvida por SolarDream Studios e aperfeiçoada por The Man in Blue.
Livro do Maujor? Novo!?Será lançado no próximo mês de julho o livro Criando sites com HTML de autoria do Maurício Samy Silva. Ver detalhes...

Pela primeira vez vi um layoult que funciona de verdade com div's e height 100%, muito bom mesmo.
Responder comentário
Esse hack pro IE6 valida no W3C?
Responder comentário
Comprei seu livro e o utilizo para tudo ! Já estou virando fera por causa dele !
Eu já tinha visto uma solução parecida, porém não funcionava direito quando o conteudo passava do final da página... aí o footer ficava em cima do conteudo...
Vou testar e ver se funciona.. ai eu comento denovo,,,
Obrigado

Alou tem alguem ai?
Samy pode responder minha pergunta? Valeu!
Abraços!

@Olá Eduardo,
Vá em http://jigsaw.w3.org/css-validator/ e digite o endereço da página com o hack para ver se valida.
--------------------------------------------------------
@Olá desenvolvedores dos Padrões Web,
Sempre que você tiver dúvida sobre validação consulte direto na fonte, os validadores do W3C, que é uma ferramenta sua.

Estranho, fiz aqui sem o hack e funcionou normalmente no IE6
Responder comentário
Olá Mauricio,
Vi seu artigo de :
Quinta-feira, 12/06/2008 - 11:00 - Por Mauricio Samy
Seções relacionadas: CSS
e me veio de novo, a ? ///que linguagem devo mergulhar para nadar na WEB ? ///
Creio eu que vc pode me ajudar, pois sou profis autônomo independente e uso, a minha ferramenta predileta, o {{ VFP-9}} ; e isso desde que era chamado de FoxPro, a cerca de duas décadas. A mim seria muito importante o seu parecer.
Pedro Luceac pedroluceac@terra.com.br
Forte ABRAÇO !!

@Pedro,
Comece estudando HTML

Estou com o seguinte problema: a coluna auxiliar não está sendo exibida corretamente: Ela é exibida sem a cor verde de fundo e sem ir até o final da página.
Eu consigo visualizar corretamente a página desenvolvida no tutorial. Porém, se eu pegar o código dela inteiro, e criar um index.htm com o código, e abrir de meu pc, tenho esse problema com a coluna auxiliar.
Alguem sabe o que pode ser???
(Acontece tanto quando aberto no firefox ou IE)

Primeiro - Olha Mauricio Bivis!!!
Va no navegar do FireFox e baixe um complemento chamado "FireBug", ultilize esse complemento quando você estiver na página que quiser.O FireBug tem um botão chamado "inspecionar" com ele você consegue ver todo o código do site, seja ele HTML, CSS, JavaScrit etc... .
Depois compare o seu código com o do site que você deseja ver, caso o seu código estiver diferente concerte-o.
Segundo - Mauricio Samy e todos!!!.
Existe outro complemento chamado de "Web Developer"(quando forem proucura, proucure pelo nome "Developer") esse complemento possui uma aba chamada Tools(ferramentas) nessa aba há uma ferramenta chamada "Display page Validation", ou seja, "Mostrar página de validação", quando você ativar essa ferramenta aparecerá
uma outra barra no navegador que terá uma descrição(Page Validation) e dois botões o 1° terá escrito(HTML: {dentro dessa area ele comunicará se o HTML está valitado ou não} ) o 2° terá escrito(CSS: {dentro dessa area ele comunicará se o CSS está valitado ou não}), caso o HTML ou o CSS estaja valitado aparecerá um símbulo verde de "Certo", caso não estaja valitado aparecerá um símbulo vermelho com um "!" e o numero de erros. Se você quiser ver quais foram os erros basta clicar em cima do "símbulo" que ele te levará ao site do valitador que você havia passado para o Eduardo, lá ele mostrará quais foram os erros além de dizer em qual linha e coluna que acontecera os erros.

Daniel! Muito obrigado pela ajuda, consegui descobrir o problema!
Usei o firebug e fui retirando todos os atributos CSS pra descobrir em qual estava a diferença.
O problema é que eu não estava com a figura "bg-auxiliar.gif", assim o background ficava sem a parte verde -- (#tudo {background: #FFFFFF url(bg-auxiliar.gif) repeat-y scroll right center} --.
Bom... salvei uma figura e configurei o CSS igual ao site, e funcionou!
Valeu!... abraço!

Perfeito Mauricio, ótimo artigo.
Responder comentário
Perfeito Mauricio, ótimo artigo.
Responder comentário
Muito boa dica. Apliquei a regra no seguinte portal:
www.cultura.ma.gov.br
Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.
Mauricio Samy é Engenheiro Civil formado pelo IME, ex-Professor de Geometria Descritiva e Matemática, autodidata em CSS e administrador do site www.maujor.com.
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.