Artigo original: How to keep your footer where it belongs ?

O rodapé é o elemento mais abaixo na página. No mínimo, ele estará na parte inferior da viewport ou mais abaixo, se o conteúdo da página for maior que a viewport. Parece simples, não?

Ao trabalhar com conteúdo dinâmico que inclui um rodapé, às vezes ocorre um problema onde o conteúdo da página não é grande o bastante para preenchê-la. O rodapé, em vez de ficar na parte inferior da página, onde queríamos que ele ficasse, vai para cima e deixa um espaço em branco abaixo dele.

Para consertar isso rapidamente, você pode usar a posição absoluta com o rodapé na parte inferior da página. Mas isso também causa um problema. Se o conteúdo ficar maior do que a viewport, o rodapé seguirá "travado" na parte inferior da viewport, mesmo que não seja essa a nossa vontade.

A imagem abaixo mostra os comportamentos que não queremos e os que queremos:

CmSel82bidnUEBQ5fnl1aWwQlwmj4h2eO0WI

Vamos ver aqui uma maneira de conseguir fazer isso.

Controlando o posicionamento do rodapé

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- o resto do conteúdo da página -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* altura do rodapé */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* altura do rodapé */
}

O que estamos fazendo?

  • O elemento div com o id page-container cerca tudo o que está na página, definindo sua altura mínima como 100% da altura da viewport (vh). Como ele tem a propriedade position definida como relative, seus elementos filhos podem ser definidos com a position absolute com base no elemento pai posteriormente.
  • A div content-wrap tem um padding inferior que é igual à altura do rodapé, garantindo que haja espaço exato suficiente para o rodapé dentro do contêiner onde os dois se encontram. Uma div circundante é usada aqui para conter todo o resto do conteúdo da página.
  • O elemento footer (nosso rodapé) tem position definida como absolute, mantendo-se em bottom: 0 da div page-container onde se encontra. Isso é importante, pois ele já não está na position absolute com relação à viewport, mas se moverá para baixo se page-container for maior do que a viewport. Conforme dito anteriormente, sua altura, definida arbitrariamente como 2.5rem aqui, é usada na div content-wrap acima dele.

Aí está. Seu rodapé agora ficará no lugar que você deseja!

Toques finais

Claro, isso é CSS, portanto não estaria completo sem considerações de UX específicas dos dispositivos móveis e com uma abordagem alternativa usando min-height: 100% em vez de 100vh. Mas isso também tem desvantagens.

O Flexbox (por meio da propriedade flex-grow) ou o Grid também podem ser usados e são bastante úteis.

O método que você escolherá ficará por sua conta. A parte específica do seu design também. Esperamos que o exemplo acima e os links ajudem você a economizar tempo na hora de decidir qual será sua implementação.

Obrigado pela leitura. O autor também escreveu outros artigos que valem a pena conferir: