11/06/2020

Rodapé em baixo das páginas com conteúdo limitado

Rodapé em baixo das páginas com conteúdo limitado

Como fazer para que o rodapé fique no fim das páginas sem conteúdo?
Em algumas ocasiões precisamos editar o layout de algum site, seja em html, wordpress ou outros, dependendo das configurações do style atual isso se torna um problema.Para que isso funcione da forma que queremos, temos que observar 3 posições para a altura da janela e a área de conteúdo expanda conforme necessário.

1 – Geral (Tag – html)
2 – Interno contendo conteúdo/footer (Após Tag – body)
3 – Footer (Tag – footer ou id/class da tag referente)A estrutura html se parece assim:

<html>
  <head></head>
  <body>
    <div class="content">
      <h1>Rodapé sempre na parte inferior</h1>
      <p> Conteúdo da página</p>
    </div>
    <footer>Seu Rodapé</footer>
  </body>
</html>

Soluções usando o css:

* {
padding: 0px;
margin: 0px;
}

html{/* 1 - Geral */
height: 100%;
}

.content, body {/* 2 - Interna contendo conteúdo/footer */
min-height: 100%;
position: relative;
}

footer {/* 3 - Footer */
width: 100%;
bottom: 0;
position: absolute;
}

Share

Marcelo Sena

Programador PHP e Especialista em Sistemas WEB. Atualmente trabalhando como Freelancer, e Autor/Editor nas horas vagas - blog marcelosena.com.

Você pode gostar...

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: