[CSS] Footer no final da página
Updated
•1 min read![[CSS] Footer no final da página](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1685140125751%2F9a0869f2-a6bf-4146-9dd7-a898ca486abe.png&w=3840&q=75)
Ao adicionar um footer em uma página, geralmente ele age como esperado e é posicionado no final da tela. Mas se sua página for menor que a tela do usuário, o footer vai ficar no meio do caminho. Muito feio.
Para ajeitar isso, é necessário ajustar o tamanho do html e body para o máximo da tela e colocar uma margem dinânica no footer.
body {
min-height: 100vh; // Fallback
min-height: 100dvh; // Compatibilidade com mobile
display: flex;
flex-direction: column;
}
.footer{
margin-top: auto;
}
<body>
<header class="header">
<!-- Barra de navegação -->
</header>
<main class="page">
<!-- Conteúdo -->
</main>
<footer class="footer">
<!-- Rodapé -->
</footer>
</body>
Note que a unidade dvh é usada para responsividade com mobile, que pode mudar seu viewport devido às diversas barras de navegação nativas.
Leia mais sobre isso aqui.
Essa é uma solução simples, mas que muitas vezes não é intuitiva de implementar.
![[Node.js] Manipulação de arquivos](/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fstock%2Funsplash%2FlRoX0shwjUQ%2Fupload%2Fcc3d6f404188dc5225f1757ee4d76628.jpeg&w=3840&q=75)