Очень странно, что столь простое действие используется через раз. Много вёрсток, да и уже готовых шаблонов 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
. Сделать это конечно же можно, никто вам не запрещает, но это считается дурным тоном.
Так что лучше уж создайте на один класс больше.