Как закрепить footer снизу страницы

Для фиксации футера внизу страницы есть несколько подходов:

1. Flexbox (рекомендуется):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

2. Grid:

body {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

3. Классический способ (если контент меньше высоты экрана):

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Flexbox - самый надежный вариант, так как:

• Работает при любом количестве контента
• Не требует расчета отступов
• Поддерживается всеми современными браузерами

Для IE11 может потребоваться добавление height: 100% для html и body.