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

Asked

Viewed 119 times

0

Hello, I’m learning how to create websites and I came across a problem when I was formatting the footer, it wasn’t exactly below my page, in fact it was below to some extent, but when I was scrolling down the page it was in the middle, how can I fix it? Note I cut part of the CSS but currently the page is like this:

Percebe que o rodapé fica no canto de forma errada

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>

html css positioning footer

  • Change absolute for fixed and put on the body a padding-bottom from the same height as the footer. But since the footer has no height set, you should probably use Javascript to control this.

1 answer

0


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

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

After that, I define that the footer will have a position absolute and the distance from it to the bottom 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>

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

I hope it helped. Hugs!

Browser other questions tagged html css positioning footer

You are not signed in. Login or sign up in order to post.