# [CSS] Footer no final da página
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.
```scss
body {
min-height: 100vh; // Fallback
min-height: 100dvh; // Compatibilidade com mobile
display: flex;
flex-direction: column;
}
.footer{
margin-top: auto;
}
```
```xml
```
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](https://www.w3.org/TR/css-values-4/#viewport-variants:~:text=with%20the%20page.-,dynamic%20viewport,-The%20dynamic%20viewport).
Essa é uma solução simples, mas que muitas vezes não é intuitiva de implementar.