Как привязать футер к низу страницы css

Существует несколько способов, позволяющих решить данную проблему. Рассмотрим некоторые из них.

Исходный HTML файл:

<html>
<body>
<!-- Основной блок (обёртка) -->	
<div class="wrapper">
  <!-- Блок с контентом -->	
  <div class="content">i am content</div>
  <!-- Футер -->	
  <div class="footer">I am footer</div>
</div>
</body>
</html>

Пример №1. Footer документа прижимается к низу с помощью фиксированного позиционирования.

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  /* Добавим цвет и ширину блока для наглядности*/
  background-color: #444;
  width: 100%;
}

Пример №2. C помощью Flex. Обратите внимание что классу обертке необходимо будет задать высоту.

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

Пример №3. С помощью Grid. У обертки так же задается высота.

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto ;
}

Чтобы футер стоял внизу, даже когда контента мало, сделайте body flex-контейнером в колонку на всю высоту окна, а основному блоку дайте растянуться:

<body>
  <header>Шапка</header>
  <main>Контент</main>
  <footer>Футер</footer>
</body>

flex: 1 у main забирает всё свободное место, и футер прижимается к низу. Когда контента много, футер просто идёт после него.

Через grid

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

Три строки: шапка по содержимому, контент на всё оставшееся место, футер по содержимому.

Футер всегда на экране

Если футер должен быть виден постоянно, даже при прокрутке, используйте position: fixed:

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

body {
  padding-bottom: 60px; /* высота футера, чтобы он не закрывал контент */
}

На телефонах

100vh на мобильных браузерах иногда больше видимой области из-за адресной строки. Используйте 100dvh — динамическую высоту окна:

body {
  min-height: 100dvh;
}

Если не работает

• Между body и main есть обёртка, например <div id="root"> в React. Тогда display: flex и min-height задайте этой обёртке.
• У html или body есть height: 100% вместе с внутренними отступами — футер уезжает ниже окна. Оставьте только min-height.

Вёрстку на flexbox и grid разбирают в курсе «Профессиональная вёрстка».