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

Автор DeniDenx На чтение 3 мин. Просмотров 97 Опубликовано 11 января, 2021

Очень странно, что столь простое действие используется через раз. Много вёрсток, да и уже готовых шаблонов WordPress не используют прижатие footer’а к низу страницы. Прижать footer можно в любое время, как до начала написания кода, так и после. Всё что вам нужно сделать, это весь имеющийся код разделить на две части.

Footer
Весь остальной контент

Допустим у вас уже имеется такой код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">Lorem ipsum dolor sit amet.</div>
    <div class="content">Lorem ipsum dolor sit amet.</div>
    <div class="footer">Lorem ipsum dolor sit amet.</div>
  </body>
</html>

Всё что вам нужно сделать, это класс header и content завернуть в общий класс (назовем его top), затем top вместе с footer обернуть одним общим классом, пусть будет wrapper

В итоге имеем такой результат:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="top">
        <div class="header">Lorem ipsum dolor sit amet.</div>
        <div class="content">Lorem ipsum dolor sit amet.</div>
      </div>
      <div class="footer">Lorem ipsum dolor sit amet.</div>
    </div>
  </body>
</html>

Затем всё это дело стилизуем применяя flexbox, в файле style.css прописываем следующее:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.top {
  flex-grow: 1;
}

Объяснение написанному:

display: flex; — включаем технологию flexbox.
flex-direction: column; — расположить элементы колоннами.
min-height: 100vh; — минимальная высота элемента.
flex-grow: 1; — занять всё доступное пространство.

Ну вот и всё на этом. Очень легко, не так ли? Конечно это не единственный способ прижать footer к низу страницы, но я использую именно его т.к. он самый быстрый и удобный.

У многих может возникнуть вопрос, зачем создавался отдельный класс wrapper, почему мы просто не задали эти параметры для body. Сделать это конечно же можно, никто вам не запрещает, но это считается дурным тоном.

Так что лучше уж создайте на один класс больше.