Skip to main content
adicionou 1278 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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>

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>

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

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>
Fonte Link
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>