Html & Css

Курс молодого бойца: испытание на прочность
  • 21.10.2019
  • Html & Css
  • Просмотров:30
  • Комментариев:0

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;
}

Комментарии

Написать комментарий

Оставить комментарий

*Поля обязательны для заполнения

Поиск по сайту