1. HTML и CSS
  2. Прижать футер к низу сайта

Прижать футер к низу сайта

Есть два способа расположить футер внизу страницы.

Для начала надо подготовить HTML:

<body>
  <div class="content">Контент</div>
  <footer>Подвал</footer>
</body>

1-ый способ: Flex

Пример кода через display: flex.

* {margin: 0; padding: 0;}

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

.content {
  flex: 1;
}

Пример кода:

2-ой способ: Grid

Пример кода через display: grid.

* {margin: 0; padding: 0;}

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

Вариант через Grid оличается тем, что код немного короче.

Пример кода: