CSS <footer> não vai para o final da pagina

vinicius kern · 12 de outubro de 2020

<>Olá pessoal, estou fazendo um projeto de estudos e simplesmente o <footer> fica fixo em baixo do <header> e eu não sei o porque disso. Eu realmente não qeria usar o position para colocar ele no final da pagina por questões de responsividade. Alguem poderia me ajudar a ver o que está acontecendo?

CÓDIGO INDEX:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">


<link rel="stylesheet" href="css/menu.css">
   <link rel="stylesheet" href="css/estilo.css">
   <link rel="stylesheet" href="css/imgs.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<header>
   <figure id="logosite">
       <a href="index.html">
           <img id='logo' src="imagens/logo.png" alt="logo" title="Subir para o topo da página">
       </a>
   </figure>
   <div id="redes">
       <a href="#">
           <img class="facebook" src="imagens/logoface.png" alt="logoface" title="Facebook" width="75px">
       </a>
       <a href="#">
           <img class="twiter" src="imagens/logotwiter.png" alt="logotwiter" title="Twiter" width="75px">
       </a>
       <a href="#">
           <img class="linkedin" src="imagens/logolinkedin.png" alt="logolinkedin" title="Linkedin" width="75px">
       </a>
   </div>
</header>
<body>
<div class="btn">
<span class="faz fa-bars"></span>
</div>
   <nav class="menu">
<div class="text">Menu</div>
       <ul>
           <li class="active"><a href="index.php">Home</a></li>
           <li>
                   <a class="sub1-btn">Sobre o Covid-19?
                       <span class="faz fa-caret-down first"></span>
                   </a>
                   <ul class="sub1-show">
                       <li><a href="paginas/sobre.html">o que é?</a></li>
                       <li><a href="paginas/transmicao.php">Transmissão</a></li>
                       <li><a href="paginas/sintomas.php">Sintomas</a></li>
                       <li><a href="paginas/prevencao.php">Prevenção</a></li>
                       </ul>
           </li>
           <li>
               <a class="sub2-btn">Reeduque-se
                   <span class="faz fa-caret-down second"></span>
               </a>
               <ul class="sub2-show">
                   <li><a href="paginas/alimentacao.php">Dicas de Alimentação</a></li>
                   <li><a href="paginas/esportes.php">Dicas de Esportes</a></li>
                   <li><a href="paginas/cuidados.php">Cuidados ao Sair de Casa</a></li>
               </ul>
           </li>
           <li><a href="paginas/mitos.php">Caçadores de Mitos</a></li>
           <li><a href="paginas/SobreApp.php">App Coronavírus</a></li>
           <li><a href="paginas/noticias.php">Ultimas Notícias</a></li>
           <li><a href="paginas/formulario.php">Ajude nas Pesquisas</a></li>
       </ul>
   </nav>

CÓDIGO CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
user-select: none;
font-family: 'Poppins', sans-serif;
}
body{
   background-color: #4b5a81;
   height: 100%;
}
header{
   background-color: black;
   width:100%;
   height:160px;
}
.div1{
background-color: black;
position: absolute;
top: 60%;
left: 50%;
width: 70%;
transform: translate(-50%,-50%);
color: white;
z-index: -1;
text-align: center;
border-radius: 5px;
box-shadow: 0 0 1em black;
}
.div1 .header1{
font-size: 45px;
font-weight: 600;
}
.div1 p{
font-size: 30px;
font-weight: 500;
}
footer{
   background-color: black;
   height:100px;
   width: 100%;

}

Adriano_web · 12 de outubro de 2020

Olá @vinicius kern boa tarde. Já tentou escrever a declaração "clear: both" no footer?

footer {
  clear: both;
}

vinicius kern · 13 de outubro de 2020

Olá adriano, muito obrigado por responder. Então, eu tentei aqui e ele foi um pouco para baixo só.

Adriano_web · 14 de outubro de 2020

@vinicius kern Olá tudo bem? Então, esse seu código mostrado contém alguns erros então resolvi alterar algumas coisas para você ok? Mais abaixo explicarei as alterações.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <!-- <title>Sidebar Menu with sub-menu | CodingNepal</title> -->
    <link rel="stylesheet" href="css/menu.css">
    <!-- Ilustrar "estilo.css" no <style> abaixo -->
    <style>
      @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

      * {
        margin: 0;
        padding: 0;
        user-select: none;
        font-family: 'Poppins', sans-serif;
      }
      
      body {
        background-color: #4b5a81;
      }

      header {
        background-color: black;
        width: 100%;
        height: 160px;
      }
      
      .menu {
        float: left;
        width: 120px;
        height: 100vh;
      }

      .div1 {
        background-color: black;
        border-radius: 5px;
        box-shadow: 0 0 1em black;
        color: white;
        text-align: center;
        width: 70%;
        z-index: -1;
        float: left;
      }

      .div1 .header1 {
        font-size: 45px;
        font-weight: 600;
      }

      .div1 p {
        font-size: 30px;
        font-weight: 500;
      }

      footer {
        background-color: black;
        clear: both;
        height: 100px;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="css/imgs.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <header>
      <figure id="logosite">
        <a href="index.html"><img id='logo' src="imagens/logo.png" alt="logo" title="Subir para o topo da página"></a>
      </figure> 
      <div id="redes">
        <a href="#"><img class="facebook" src="imagens/logoface.png" alt="logoface" title="Facebook" width="75px"></a>
        <a href="#"><img class="twiter" src="imagens/logotwiter.png" alt="logotwiter" title="Twiter" width="75px"></a>
        <a href="#"><img class="linkedin" src="imagens/logolinkedin.png" alt="logolinkedin" title="Linkedin" width="75px"></a>
      </div>
    </header>

    <div class="btn"><span class="faz fa-bars"></span></div>
    
    <nav class="menu">
      <div class="text">Menu</div>
      <div>
        <ul>
          <li class="active"><a href="index.php">Home</a></li>
          <li>
            <a class="sub1-btn">Sobre o Covid-19?
              <span class="faz fa-caret-down first"></span>
            </a>
            <ul class="sub1-show">
              <li><a href="paginas/sobre.html">o que é?</a></li>
              <li><a href="paginas/transmicao.php">Transmissão</a></li>
              <li><a href="paginas/sintomas.php">Sintomas</a></li>
              <li><a href="paginas/prevencao.php">Prevenção</a></li>
            </ul>
          </li>
          <li>
            <a class="sub2-btn">Reeduque-se
              <span class="faz fa-caret-down second"></span>
            </a>
            <ul class="sub2-show">
              <li><a href="paginas/alimentacao.php">Dicas de Alimentação</a></li>
              <li><a href="paginas/esportes.php">Dicas de Esportes</a></li>
              <li><a href="paginas/cuidados.php">Cuidados ao Sair de Casa</a></li>
            </ul>
          </li>
          <li><a href="paginas/mitos.php">Caçadores de Mitos</a></li>
          <li><a href="paginas/SobreApp.php">App Coronavírus</a></li>
          <li><a href="paginas/noticias.php">Ultimas Notícias</a></li>
          <li><a href="paginas/formulario.php">Ajude nas Pesquisas</a></li>
        </ul>
      </div>
    </nav>
    <section id="meio">
      <div class="div1">
        <!-- Aqui eu inseri o elemento de título <h1> -->
        <h1 class="header1">aqui vai o titulo</h1> 
        <p>aqui vai o scmskdcmlskdmclksd
        Limite da cidade, da paciência, da corda. 
        Acorda! Vai fazer alguma coisa da vida. No Aurélio é o que representa para alguém 
        motivo de estímulo, de amor a vida. Não tenho. Talvez consiga comprar um dia. Quando t
        em sol é sempre mais legal.O diferente é igual. Penso que Schopenhauer faz muito sentido
        e Baudelaire é completamente louco. Tudo acaba. Quanto antes melhor. Não gosto de cicatrizes.
        e Baudelaire é completamente louco. Tudo acaba. Quanto antes melhor. Não gosto de cicatrizes..</p>
      </div>
    </section>
    <footer>
      <h1>aqui fica o rodapé</h1>
    </footer>
    <script>
      $('.btn').click(function(){
        $(this).toggleClass("click");
        $('.menu').toggleClass("show");
      });
      $('.sub1-btn').click(function(){
        $('nav ul .sub1-show').toggleClass("show");
        $('nav ul .first').toggleClass("rotate");
      });
      $('.sub2-btn').click(function(){
        $('nav ul .sub2-show').toggleClass("show1");
        $('nav ul .second').toggleClass("rotate");
      });
      $('nav ul li').click(function(){
        $(this).addClass("active").siblings().removeClass("active");
      });
    </script>
  </body>
</html>

Então, no código eu alterei primeiro o elemento <header> que estava fora da tag <body> e isso provavelmente causava um erro na estrutura da página. A segunda alteração foi na tag <script> que estava inserida logo depois da tag <nav> (o ideal é que ela fique antes da tag de fechamento </body>, pois o script só é carregado quando a página inteira tiver sido carregada), além disso, a inserção causa uma má prática ao misturar JavaScript com marcação HTML no meio. As outras alterações foram à indentação do código para melhor visualização do programador, remoção do position: absolute, inserção do float: left e correções em elementos que estavam com falta de tag's de fechamento. Eu simulei o seu arquivo "estilo.css" no elemento <style> para fins de exemplo, você pode substituí-lo pelo <link> contendo o arquivo. Caso não dê certo por favor comente para um retorno meu.