Как прижать footer к низу страницы, перебробовал все способы?

Вопрос, как прижать footer к низу страницы в HTML, является довольно распространенным, и есть несколько способов решения этой проблемы. В некоторых случаях может быть необходимо применение комбинации различных методов в зависимости от контекста вашего проекта.

1. Использование CSS Flexbox:
Flexbox - это мощная техника CSS, которая позволяет управлять расположением элементов внутри контейнеров. Для того чтобы прижать footer к низу страницы, нужно применить следующие свойства к родительскому контейнеру:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

.footer {
  flex-shrink: 0;
}

Данный код определяет, что основной контент (.content) будет занимать все свободное пространство (flex: 1), а footer (.footer) будет прижат к нижней части контейнера, не занимая свободное пространство (flex-shrink: 0).

2. Использование CSS Grid
CSS Grid - это другая мощная техника CSS для создания сеток. Для прикрепления footer к нижней части страницы с помощью Grid, можно применить следующие свойства:

html, body {
  height: 100%;
  margin: 0;
}

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

.content {
  grid-row: 1 / -1;
}

В данном коде, основной контент (.content) занимает все свободное пространство указанное grid-row: 1 / -1, а footer (.footer) помещается на последний автоматический ряд auto.

3. Использование позиционирования
В некоторых случаях, можно прижать footer к низу страницы с помощью позиционирования:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  position: relative;
  min-height: 100vh;
}

.content {
  padding-bottom: 100px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
}

При помощи position: relative в .container, все содержимое этого контейнера смещается вниз на высоту footer, заданную с помощью padding-bottom в .content. Затем, у footer применяется position: absolute и bottom: 0, чтобы закрепить его в нижней части родительского контейнера.

Это только некоторые из возможных способов решения данной проблемы. Все они могут быть адаптированы и настроены в зависимости от конкретного контекста и требований вашего проекта.