[CSS] Footer no final da página
![[CSS] Footer no final da página](https://cdn.hashnode.com/res/hashnode/image/upload/v1685140125751/9a0869f2-a6bf-4146-9dd7-a898ca486abe.png)
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](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/lRoX0shwjUQ/upload/cc3d6f404188dc5225f1757ee4d76628.jpeg)