Cómo situar correctamente el footer

Manera moderna y más correcta:

Ver página de Grid aquí

Manera más tradicional:

• Pantalla: 100% del height del viewport -> De ese 100vh, hay que tener en cuenta que una parte lo ocupa la nav y otra el footer.
• Para ello, realizamos el siguiente cálculo:

  100vh - height de la nav - height del footer

  Desglose:
  • En esta web, el height de la nav es 3.5rem (2.5rem del height del icono + 2x0.5rem del padding)
  • El height del footer es: 19px + 32px (padding-top) + 32px (padding-bottom) + 48px (margin-top) = 131px = 8rem (inspeccionar main-footer).

  main { min-height: calc(100vh - 3.5rem - 8rem) }

• Tener cuidado con márgenes superiores o inferiores adicionales que puedan ampliar el tamaño del main (sustituirlos, en la medida de lo posible, por padding-top o padding-bottom )
• Así, siempre quedará el footer anclado a la parte más inferior de la página.