Казалось бы такое простое действие, а выполняется через раз. Многие разработчики забивают на это, а некоторые просто не знаю как прижать footer к низу страницы. В этой статье мы поделимся самым простым и быстрым способом сделать это.
Для решения нашей задачи, мы воспользуемся технологией flexbox. Всё, что вам необходимо сделать — это разделить ваш код на две части. В первую часть нашего кода мы поместим 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. Следующие действие, класс footer и класс top мы заворачиваем в еще один класс, у нас это будет класс 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, с её помощью мы и будем стилизовать наши созданные классы .top и .wrapper.
.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 к низу вашей страницы. Очень легко, не так ли? Быстро и красиво. Жаль, что очень многие разработчики совсем забывают про это. Также, хотелось бы напомнить, что это не единственный способ прижатия footer к низу страницы, есть и другие способы.
У многих из вас, может возникнуть вопрос, зачем создавался отдельный класс wrapper, почему мы просто не задали эти параметры для body. Сделать это конечно же можно, никто вам не запрещает, но это считается дурным тоном.
Старайтесь не совершать никаких манипуляций с тегом body, уж лучше создать на один класс больше, от этого ваш шаблон не станет хуже.
На этом у на всё, надеемся, что было полезно для вас. У нас недавно вышла статья про языки программирования, рекомендуем к прочтению, если вам интересна эта сфера, статья может быть очень полезной для вас.
