Web Development
JБлог

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

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

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

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


</div>





 

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

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

 

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

Авторизуйтесь, чтобы получить возможность оставлять комментарии