0

Olá, to aprendendo a criar sites e me deparei em um problema quando eu tava formatando o footer, ele não ficava exatamente abaixo da minha página, na realidade ele ficava abaixo até certo ponto, mas quando eu descia o scroll na página ele ficava no meio, como posso resolver isso? Obs eu cortei parte do CSS mas atualmente a página esta assim:

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>

1
  • Troque absolute por fixed e coloque no body um padding-bottom da mesma altura do footer. Mas como o footer não tem altura definida, provavelmente deverá usar JavaScript pra controlar isso.
    – Sam
    Commented 19/03/2020 às 15:39

1 Resposta 1

0

Você pode primeiro definir o valor de 100% para a altura do seu documento HTML, e dar um position: relative nele, para receber corretamente os elementos flutuantes:

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

Depois disso, defino que o footer vai ter uma posição absoluta e a distância dele para o bottom da página vai ser 0:

footer {
   position: absolute;
   bottom: 0;
}

O documento final ficaria assim:

<!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>

Dessa forma, o seu footer sempre vai ficar fixo no fundo do seu documento HTML.

Espero que tenha ajudado. Abraços!

1
  • 1
    funcionou! muito obrigado Commented 19/03/2020 às 16:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .