8

Tenho uma página na qual há uma div com vários conteúdos dentro, que se modificam de acordo com o desejo do usuário. Logo abaixo existe um outro div que é o Rodapé.

Caso eu coloque um position: relative, o rodapé irá adequar sua posição de acordo com o tamanho da página, porém ele não fica "preso" em baixo (sem nenhum espaço até o fim da página) quando a janela do navegador é redimensionada para um tamanho menor.

Já se eu colocar um position: absolute, o rodapé irá ficar fixo no fim da página, mas não se adequará ao tamanho da janela.

Mas gostaria de fixar um bottom: 0px, semelhante ao que acontece caso eu aplique um position: absolute, mas de forma que se o conteúdo da página for maior, o rodapé não sobreponha a página.

Alguém sabe como seria possível fazer isso?

Meu exemplo está aqui no JsFiddle.

2
  • Se eu realmente entendi o seu problema, creio que isto resolverá, pelo menos vai eliminar o espaço entre o footer e a borda da página: *{margin: 0;}. Coloque no começo do seu css, isto interferirá em todos os elementos da sua página em que o margin não estiver especificado. Commented 31/08/2014 às 23:43
  • Caso já tenha resolvido favor marcar a como resolvido
    – Otto
    Commented 4/09/2014 às 11:46

5 Respostas 5

4

Solução com FLEXBOX e VH

Fiz um jsfiddle com a solução perfeita pra seu problema com apenas 4 propriedades css no container de sua aplicação usando flexbox e vh como unidade relativa, entenda melhor com o código abaixo:

<section class="container">
  <main></main>
  <div class="footer"></div>
</section>

.container{
  height: 100vh;
  display: flex;
  flex-direction: column:
  justify-content: space-between;
}

Isso garante que o .container possua sempre a altura exata da viewport e que o <main></main> esteja sempre no começo do .container e o .footer esteja sempre no final, e quando o conteúdo dentro do <main></main> ultrapassar as dimensões da viweport, o .footer acompanhe o conteúdo sem se sobrepor.

Veja mais aqui nesse JSFIDDLE

E neste link um guia sobre FLEXBOX

3

Manter o rodapé sempre na base, quando o conteúdo é menor que a página, e de modo que ajuste sua posição conforme o conteúdo fique maior, pode ser feito usando um elemento div como wrapper do conteúdo.

Estrutura HTML de exemplo:

<div class="main">
    <div class="content">
        Conteúdo aqui
    </div>

    <div id="footer">
        <span>Footer</span> 
    </div>
</div>

E o seguinte CSS:

* { margin:0; padding:0; }
html, body {height:100%;}
.main {
    min-height:100%; 
    position:relative; 
    width:1200px;
    margin: 0 auto;
}
.content{   
    width: 100%;
    background: #cccccc;   
}
#footer{    
    background: #3C948B;
    position:absolute;
    bottom:0; 
    width:100%;
    margin-top: 10px;
}

Exemplo no Jsfiddle

Nota: créditos a meu colega de trabalho Marcos Souza, que aceitou o desafio.

2
  • A última linha do texto fica escondida atrás do rodapé. "ipsum ac felis(...)". Commented 23/12/2015 às 16:43
  • Essa era uma boa solução em 2014, mas hj em 2016, suponho que a melhor solução seja FLEXBOX com VH Commented 19/10/2016 às 20:58
1

Solução em jquery onde não há necessidade de alterar parâmetros em outras div ou body, somente na div onde será o footer. Uso o jquery para calcular a largura do browser, posição e largura do footer, assim sabendo quanto adicionar margin-top a div footer.

function footer_botom() {
var footer_position = $('#footer').offset().top;
var footer_height = $('#footer').height();
var tela_height = $(window).height();
var margin = tela_height-footer_position-footer_height;
$('#footer').css({"margin-top": margin+'px'});}

footer_botom();
$(window).resize(function() {
$('#footer').css({"margin-top": '0px'});
footer_botom();});
#footer {background-color:#ccc; width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="content">
        Conteúdo aqui
    </div>

    <div id="footer">
        <span>Footer</span> 
    </div>
</div>

-1

De uma olhada : Jsfiddle

Passei para position : fixed e z-index : 10

O menu permanece junto ao bottom 0px, agora é só ajustar a margin.

1
  • Sua resposta não soluciona o problema, pois apesar do rodapé manter se ao bottom da viewport, quando o conteúdo principal ultrapassa a altura da viewport o rodapé fica sobreposto, não é essa a proposta. Commented 19/10/2016 às 19:58
-3

Tente colocar uma altura mínima no conteúdo acima do footer.

Exemplo:

min-height: 100px
1
  • 1
    Leonardo, bem-vindo ao Stack Overflow em Português! O problema de colocar um min-height é que você teria que saber de antemão qual o tamanho da página. Além disso, a pergunta é como manter corretamente o footer na base do site com a janela pequena.
    – utluiz
    Commented 23/09/2014 às 15:32

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 .