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
Авторизуйтесь, чтобы получить возможность оставлять комментарии

AM DOX (Joomla 3.x)

MPC (Music Player Component) (Joomla 3.x)

AMGallery (Joomla 3.x)

AMHTML5AUDIO PRO - Audio player

Online Ocenka (Joomla 2.5)

AM Quick Sale (Joomla 3, 4)

AM Lang

AMHTML5AUDIO Lite - Audio player

AMPopup

AM Unite Gallery Plugin

XMap для MPC

AM Parallax Slider (beta)

AMQS Currency Switch