Ajuda rodapé
  • Bom pessoal, minha dúvida é a seguinte.

    Quero fazer o rodapé da pagina ficar sempre fixo no bottom, até ai tudo certo, consigo tranquilo. O problema é que quando a pagina tem pouco conteudo fica um espaço em branco entre a div conteudo no caso e a div rodapé.

    Gostaria de saber como faço a div conteúdo ficar sempre colada no rodapé, mesmo quando o conteúdo for pouco ela descer.

    Obrigado.
  • fdaciukfdaciuk
    junho 2012
    Coloque sua DIV de conteúdo com altura 100%. Vai depender também da forma que você está fazendo para deixar o rodapé fixo na parte de baixo da janela.
  • to colocando com Position:absolute e bottom:0;
  • LFehLFeh
    julho 2012
    Amg, deixe seu footer dentro do body, com position absolute, left: 0 e bottom: 0. Deve resolver.
  • EdnilsonEdnilson
    julho 2012
    O "body" do documento deve ter "height:100%;". Dentro deste "body" você pode adicionar uma "div#tudo" que contenha as DIVs "div#conteudo" e a "div#footer".

    Imagine que sua div#tudo tenha 1000px e seja centralizada no navegador. A princípio ela deve ter também altura de 100% como o BODY mas o segredo está em definir a regra "position:relative;". Isso fará com que a posição absoluta de #footer seja em relação ao container ancestral (#tudo) e não o BODY e não fique colada no canto esquerdo do navegador mas sim no canto esquerdo inferior de #tudo. Você pode aplicar um background em #tudo que este ocupará do topo ao fim do viewport. Desta forma mesmo que o conteúdo seja pouco você terá a sensação de que o espaço está ocupado.


    #tudo {
    position: relative; /* regra de ouro para posicionar o footer */
    width: 1000px;
    height: 100%;
    margin: 0 auto 0;
    background-color: #9d0; /* cor diferente de body */
    }

    #footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* para forçar o container a ter a mesma largura do ancestral #tudo */
    }