- 21.10.2019
- Html & Css
Footer внизу страницы
Уровень сложности:
Есть много способов как прижать Footer к низу страницы (позиционирование, Calc и т.д). Для того чтобы прижать футер сайта к низу страницы будем использовать технологию Flex. Единственный минус – Flex не поддерживаться в старых браузерах.
Код HTML
<body>
<div class="wrap">
<header>
HEADER
</header>
<main>
MAIN
</main>
<footer class="sticky-footer">
FOOTER
</footer>
</div>
</body>
Код CSS
.wrap {
display: flex;
flex-direction: column;
height: 100vh;
}
header,
footer {
background: #00B4CC;
color: #fff;
padding: 15px;
}
main {
flex: 1 0 auto;
padding: 15px;
}
.sticky-footer {
flex: 0 0 auto;
}
Комментарии
Написать комментарий