Web Development
JБлог

Простая HTML сетка на Flexbox с прижатым к низу футером

Оцените материал
(1 Голосовать)

В этой статье я покажу с чего я начинаю верстать любой шаблон, так сказать шаблон шаблона). Но признаюсь не я его придумал. Для красоты в любом нормальном шаблоне принято прижимать футер к низу окна браузера не зависимо есть на странице контент или нет. Поэтому футер вынесем в отдельный независимый блок, а все остальное в другой.

<body>
    <div class="main">
        Основная контент
    </div>
    <div class="footer">
        Наш футер
    </div>
</body>

Стили с использованием Flexbox.

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}

В блоке main 'основной' используйте все что вашей душе угодно и на что горазда ваша фантазия.

edit Последнее изменение Воскресенье, 24 февраля 2019 19:28
Авторизуйтесь, чтобы получить возможность оставлять комментарии