4

Estou precisando deixar uma div com height: 100% de conteúdo e abaixo dela ainda ficar o rodapé, mas, por exemplo, quando não tiver conteúdo para completar toda a tela, o rodapé aparece no final da pagina. Ele tem 100px e quando o conteúdo completar a pagina, o rodapé fica somente depois do conteúdo, após a rolagem mesmo...

Estou com esse problema pois estou usando o bootstrap e a minha navbar fica na vertical no canto do lado direito. Minha tag html tem a mesma cor do navbar para completar a cor até o final pois o menu não completa tudo e o rodapé tem a mesma cor dessa sidebar e da tag html.

A minha div de conteúdo possui outra cor, quando a pagina não completa tudo, o rodapé sobe e a cor do rodapé fica estendida até boa parte da página, deixando esteticamente feio. O rodapé devia ficar no fim da pagina e a cor da parte de conteúdo ficasse ate onde aparece o rodapé.

Alguém tem alguma solução pra isso?

7
  • 5
    Pode postar o código no jsfiddle ?
    – fotanus
    Commented 18/02/2014 às 13:14
  • 2
    Existem várias soluções para o problema que apresentas, mas para apurar qual a adequada para o teu caso será necessário saber como tens a estrutura da página. Como já referido, podes criar um JSFiddle com o HTML necessário para replicar o problema ou colocar o mesmo na tua pergunta.
    – Zuul
    Commented 18/02/2014 às 13:32
  • @CaioGomes por acaso sua página tem tamanho igual ao tamanho da altura da janela atual? Poderia dizer se está aplicado algum tamanho fixo a sua página? Commented 18/02/2014 às 13:43
  • 1
    Nada contra também usar o JSFiddle, mas lembre de botar o código relevante na pergunta.
    – Gabe
    Commented 18/02/2014 às 14:06
  • possível duplicata de Como fazer o container alcançar o rodapé? (mesmo com pouco conteúdo) Commented 18/02/2014 às 14:36

3 Respostas 3

4

HTML

<div id="geral">
<div id="topo">TOPO</div>
<div id="conteudo">CONTEÚDO</div>
</div>
<div id="rodape">Rodapé</div>

CSS

html, body, #geral { height: 100%; }
body > #geral { height: auto; min-height: 100%; }
#conteudo { padding-bottom: 40px; } /* O padding, deve ser o mesmo valor da altura do rodapé */
#rodape {
    position: relative;
    margin-top: -40px; /* Este margin, tem que ser o mesmo valor da altura do rodapé, só     que negativo */
    height: 40px; /* E aqui, fica a altura do rodapé */
    clear: both
}
1

Pelo que eu entendi você de deixar o rodapé fixo:

assim:

        div#footer {
            width: 100%;
            background-color: #ccc;
            color: white;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 100px;
            text-align: center;
            z-index: 10;
        }

segue exemplo:aqui

0

Pelo que entendi você quer algo mais ou menos assim:

Caso a página tenha pouco conteúdo, o rodapé permaneça grudado no rodapé do navegador. Clique no Exemplo.

Caso a página tenha bastante conteúdo, o rodapé se ajuste a altura do conteúdo que ultrapassou a altura da janela do navegador. Clique no Exemplo.

Veja outro exemplo usando a mesma técnica: Clique no Exemplo. (Altere o tamanho da janela para perceber o rodapé).

Outra possibilidade é que você queira o rodapé fixo. Basta usar o exemplo acima alterando a propriedade position do rodapé para fixed.

Para mais detalhes sobre essa técnica:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .