Версия для печати

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

Оцените материал
(2 голосов)

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

HTML сетка на Flexbox

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


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

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

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

 
 
 
 

Возможно вам понравится