how do I make a footer that is always below all elements

Question

how do I make a footer that is always below all elements

Hello, learning to create sites and I came across a problem when I was formatting the footer, it was not exactly below my page, in reality it was below to some extent, but when I scroll down the page it was in the Middle, how can I solve this? Obs I cut part of the CSS but currently the page looks like this:

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

<body>
  div id="interface">
  <header id="cabecalho">
    <img src="../midia/mini_logo1(1).png" id="logo">
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">PodCasts</a></li>
        <li><a href="">Quem somos</a></li>
      </ul>
    </nav>
  </header>
  <section id="ultimoseps">
    <h2 class="ultiep">Últimos episódios</h2>
    <article id="010" class="ulep">
      <div class="mold1">
        <div class="mold2">
          <img src="../midia/vazioexistencialcapa.jpg" id="img010">
        </div>
      </div>
      <h3 class="titep">Vazio existêncial... como lidar?</h3>
      <p class="descri">Veja nossa conversa a respeito do que achamos da crise de vazio existêncial, e como fazemos para melhorar isso.</p>
      <p class="num">#010</p>
    </article>
    <article id="010" class="ulep">
      <div class="mold1">
        <div class="mold2">
          <img src="../midia/dapraviverdejogos.jpg" id="img009">
        </div>
      </div>
      <h3 class="titep">Da pra viver de vídeo games?</h3>
      <p class="descri">Na atualidade será que é viável viver stremando, ou jogando em um time profissional de algum jogo eletrônico? você vê isso aqui com a gente nesse episódio</p>
      <p class="num">#009</p>
    </article>
  </section>
  <aside id="vejatambem">
    <h2 id="vejatambem">Veja também</h2>
    <article id="tech" class="barralateral">

      <p class="blocolateral">
        <img src="../midia/mini_tech.jpg" class="imglateral" id="imgl1">
        <h3 class="h3lateral">CorujaCast <b>Tech</b></h3>
        <p class="txtlateral">Progamação, jogos, ideias, e muito mais.</p>
      </p>

    </article>
    <article id="historia" class="barralateral">
      <p class="blocolateral">
        <img src="../midia/mini_historia.jpg" class="imglateral" id="imgl2">
        <h3 class="h3lateral">CorujaCast <b>História</b></h3>
        <p class="txtlateral">De pré-história até segunda guerra mundial, você encontra conteúdo aqui.</p>
      </p>

    </article>
    <article id="variados" class="barralateral">
      <p class="blocolateral">
        <img src="../midia/mini_variados.jpg" class="imglateral" id="imgl3">
        <h3 class="h3lateral">CorujaCast <b>Variados</b></h3>
        <p class="txtlateral">Experiências, entrevistas, debates, ta tudo liberado aqui!</p>
      </p>


    </article>
  </aside>
  </div>
  <footer id="rodape">
    <a href="https://facebook.com" class="link">Facebook</a> -
    <a href="https://twitter.com" class="link">Twitter</a> -
    <a href="https://instagram.com" class="link">Instagram</a>
    <p>Este site é apenas de desenvolvimento educacional, direitos de imagens são marcas registradas de seus repectivos donos</p>
  </footer>
</body>

0

html css footer posicionamento

Author: guilherme silva, 2020-03-19

Source

1 answers

score 0 · Accepted Answer

You can first set the value of 100% for the height of your HTML document, and give a position: relative in it, to correctly receive the floating elements:

html {
   position: relative;
   min-height: 100%;
}

After that, I define that footer will have an absolute position and the distance from it to the bottom of the page will be 0:

footer {
   position: absolute;
   bottom: 0;
}

The final document would look like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Teste</title>

    <style>
        html {
            position: relative;
            min-height: 100%;
        }

        footer {
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>



    <footer>
        &copy;2020. Todos os direitos reservados.
    </footer>

</body>
</html>

This way, your footer will always stay fixed at the bottom of your HTML document.

I hope it helped. Hugs!