Такая ситуация происходит, когда «подвал» сайта имеет статическое позиционирование и расположен в конце разметки страницы. Как мы видим на рисунке, нет ничего, что могло бы подтолкнуть «подвал» вниз и он располагается в центре экрана, а под ним остается много свободного места.
В этой небольшой заметке, мы ознакомимся с одним современным методом закрепления «подвала» внизу страницы, независимо от количества контента на ней.
Чтобы предотвратить ситуацию, описанную выше, мы создадим нашу страницу с применением Flexbox – продвинутого инструмента из CSS3, применяемого при создании адаптивных сайтов.
Для тех читателей, кто еще не знаком с этой технологией, внизу статьи будут размещены ссылки на полезные ресурсы о Flexbox.
Наша демо-страница состоит из «шапки», содержимого и «подвала» - все как обычно, ничего особенного.
HTML
Чтобы активировать режим Flexbox, необходимо добавить к элементу body правило display: flex, а также изменить направление блоков (по-умолчанию они располагаются горизонтально). Элементы html и body должны иметь высоту, равную 100%, чтобы страница занимала весь экран целиком.
CSS
Теперь нам нужно указать сколько места будет занимать каждый из перечисленных элементов. Для этого мы будем использовать универсальное CSS-свойство flex, которое объединяет в себе следующие flexbox-свойства:
- flex-grow – Указывает, сколько места будет «забирать» элемент у своего родителя;
- flex-shrink – Насколько элемент будет уменьшаться, в случае когда не будет хватать места для соседних элементов;
- flex-basis – размер элемента по-умолчанию;
Нам необходимо, чтобы «шапка» и «подвал» занимали столько места, сколько им необходимо, а остальное пространство будет отведено под основное содержимое страницы. В этом нам поможет следующий CSS-код:
CSS
Чтобы увидеть, как это все работает, посетите демо-страницу по ссылке в конце статьи.
Нажмите на большую розовую кнопку, расположенную в середине блока с основным содержимым, в результате чего на страницу будет добавлено некоторое количество текста и изображение.
Таким образом демонстрируется как будет выглядеть страница при разном количестве контента.
Заключение
Как вы можете видеть, Flexbox является отличным помощником при верстке макетов с нуля. Все основные браузеры поддерживают эту технологию с небольшими различиями, значит ее можно смело использовать в своих проектах, она будет работать во всех браузерах, начиная с IE9. Если вы хотите уточнить какие свойства поддерживаются определенными браузерами, воспользуйтесь инструментом — canIUse.
Предлагаю вам ознакомиться с полезными ресурсами, чтобы изучить более детально Flexbox-модель:
- Краткое руководство по CSS Flexbox
- Cайт, посвященный «крутой» технике работе с Flexbox
- 5-минутный интерактивный урок по Flexbox
Мы надеемся, что метод фиксации «подвала», описанный в этой заметке, окажется для вас полезным и вы будете применять его в своей работе. Если вам известны какие-либо трюки на основе Flexbox, можете рассказать о них в комментариях под статьей.
Демо-страница
Оригинал статьи