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>