Como posicionar rodapé sempre embaixo da página

Usando HTML + CSS

https://maujor.com.br/tutorial/rodape-embaixo-da-janela.php

 

 

 

Flexspot:

Estrutura do HTML do body

<div class="site">
  <header>
  Menu
  </header>
  <main>
  
  </main>
  <footer>
  Rodapé
  </footer>
</div>

CSS:

*{
  margin: 0
}
.site{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header{
  background-color: red;
}
main{
  background-color: chocolate;
  flex: 1;
}
footer{
  background-color: yellow
}