Фіксуємо «підвал» унизу сторінки за допомогою Flexbox

У процесі верстки макетів розробник часто стикається з наступною проблемою: при недостатній кількості контенту, «підвал» відображається десь посередині сторінки.

допомогою

Така ситуація відбувається, коли підвал сайту має статичне позиціонування і розташований в кінці розмітки сторінки. Як ми бачимо на малюнку, немає нічого, що могло б підштовхнути «підвал» донизу і він розташовується в центрі екрану, а під ним залишається багато вільного місця.

У цій невеликій замітці ми ознайомимося з одним сучасним методом закріплення «підвалу» внизу сторінки, незалежно від кількості контенту на ній.

Щоб запобігти ситуації, описаній вище, ми створимо нашу сторінку із застосуванням Flexbox – просунутого інструменту CSS3, що застосовується при створенні адаптивних сайтів.

Для тих читачів, хто ще не знайомий із цією технологією, внизу статті будуть розміщені посилання на корисні ресурси про Flexbox.

Наша демо-сторінка складається з «шапки», вмісту та «підвалу» - все як завжди, нічого особливого.

Щоб активувати режим Flexbox, необхідно додати до елемента body правило display: flex , а також змінити напрямок блоків (за замовчуванням вони розташовані горизонтально). Елементи html і body повинні мати висоту, що дорівнює 100%, щоб сторінка займала весь екран цілком.

Тепер нам потрібно вказати скільки місця займатиме кожен із перерахованих елементів. Для цього ми будемо використовувати універсальну CSS-властивість flex, яка поєднує в собі наступні flexbox-властивості:

  • flex-grow - Вказує, скільки місця буде «забирати» елемент у свого батька;
  • flex-shrink – Наскільки елемент буде зменшуватися, якщо не вистачатиме місця для сусідніх елементів;
  • flex-basis –розмір елемента за замовчуванням;

Нам необхідно, щоб «шапка» та «підвал» займали стільки місця, скільки їм необхідно, а решта простору буде відведена під основний вміст сторінки. У цьому нам допоможе наступний CSS-код:

Щоб побачити, як все це працює, відвідайте демо-сторінку за посиланням в кінці статті.

Натисніть на велику рожеву кнопку, розташовану в середині блоку з основним вмістом, в результаті чого на сторінку буде додано деяку кількість тексту та зображення.

Таким чином демонструється як виглядатиме сторінка при різній кількості контенту.

Висновок

Як ви можете бачити, Flexbox є чудовим помічником при верстці макетів з нуля. Всі основні браузери підтримують цю технологію з невеликими відмінностями, отже, її можна сміливо використовувати у своїх проектах, вона працюватиме у всіх браузерах, починаючи з IE9. Якщо ви хочете уточнити, які властивості підтримуються певними браузерами, скористайтеся інструментом — canIUse .

Пропоную вам ознайомитися з корисними ресурсами, щоб вивчити детальніше Flexbox-модель:

  • Короткий посібник з CSS Flexbox
  • Сайт, присвячений «крутій» техніці роботі з Flexbox
  • 5-хвилинний інтерактивний урок з Flexbox