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). ou então pode simplificar usando flex
ficaria algo como:
Com position
e com o pseudo-elemento ::before
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>
Com flex:
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;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
}
body > main {
flex: 1; /*ocupa todo espaço menos a altura do footer */
}
body > footer {
min-height: 100px;
background: #0c0c0c;
color: #fff;
}
<header>
<span id="button-menu" class="fa fa-bars"></span>
<nav class="navegacion">
menu
</nav>
</header>
<main>
<section id="slide">
slide
</section>
<section class="faq">
faq
</section>
</main>
<footer>
rodapé
</footer>