Skip to main content
1 de 2
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Como respondi em https://pt.stackoverflow.com/a/205755/3635 você deseja que mesmo que a página não tenha conteudo o suficiente o rodapé apareça no fixo no final do view-port, para que não fique o espaçamento em branco e se o conteudo for maior que o view-port o rodapé deve acomapanhar o conteudo, ficando abaixo.

Neste caso você terá que combinar position: relative com absolute, não é nada obscuro, basta que o elemento "pai" (geralmente um container) esteja em relative, no seu caso tiver que criar um elemento "pai" chamado .page (pode dar o nome que desejar).

ficaria algo como:

html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

.page {
    position: relative; /* faz o footer fica com o absolute relativo ao .page - a mágica é esta */
    min-height: 100%; /% altura minima %/
}

/* criei esta classe para facilitar */
.mainfooter::before, .footer-inner {
    height: 100px; /* ajuste a altura aqui */
}

.mainfooter::before {
    content: " ";
    display: block;
}

.footer-inner {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
<header>
    <span id="button-menu" class="fa fa-bars"></span>

    <nav class="navegacion">
        Navegacao
    </nav>
</header>

<div class="page">
    <main>
        <section id="slide">
            Slide
        </section>
        <section class="faq">
            Faq
        </section>
    </main>

    <footer class="mainfooter">
       <div class="footer-inner">
            conteudo do footer
       </div>
    </footer>
</div>

Syzoth
  • 100,5mil
  • 23
  • 169
  • 361