Ефективний спосіб створення "липкого" футера

При розробці веб-макетів, в якийсь момент ви, ймовірно, зіткнетеся з цією проблемою:

{full-post-img}

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

В цьому швидкому туторіалі ми розглянемо сучасні техніки розміщення футерів, які будуть гарантовано залишатися в самому низу сторінки весь час.

Техніки розміщення

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

Для тих хто не знайомий з flexbox і його властивостями, ми залишимо пару посилань в кінці статті.

Наша демо сторінка матиме верхівку, головну секцію, футер. Звичайний HTML нічого нового.

    <header>...</header>
    <section class="main-content">...</section>
    <footer>...</footer>

Для того щоб почати користуватися flex моделлю треба додати до тега body display: flex; і змінити flex-direction: row; (row- за умовчуванням; горизонтальне розміщення) на flex-direction: column;. Крім того теги html, body потребуватимуть 100% висоти, щоб заповнити весь екран.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

Тепер нам потрібно налаштувати, скільки місця кожен розділ буде займати. Ми можемо це редагувати за допомогою трьох flex значень:

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

• flex-shrink - на скільки елемент буде зменшуватися, коли місця не вистачає.

• flex-basic - звичайний розмір для елементу.

Ми хочемо, щоб наш верхній і нижній колонтитули зайняли стільки скільки їм потрібно місця, і щоб все інше було зарезервовано для розділу основного змісту. CSS виглядатиме так:

header{
   /* Ми хочемо щоб заголовок мав статичну висоту, він завжди буде займати скільки йому потрібно місця.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

.main-content{
   /* Встановивши flex-grow: 1; основний зміст буде займати все, що залишилося на сторінці. 
   Інші елементи мають flex-grow: 0 і вони не будуть  займати вільний простір. */
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

footer{
   /* Як і заголовок підвал матиме статичну висоту - вона не повинна збільшуватися або зменшуватися.  */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

Щоб побачити техніку в дії, перевірте сторінку конфігурацій, натиснувши на зображення нижче. Використовуючи рожеву кнопку, ви можете змінити кількість контенту.

{full-post-img}

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

Ось матеріал для ознайомлення з flexbox детальніше:

• Вертикальне центрування з допомогою CSS Flexbox

• Найпростіший спосіб створювати сайдбари однакової висоти

• 5 flexbox-технік, про які ви повинні знати

Ми сподіваємося, що вам сподобався наш спосіб створення липких колонтитули і що ви підібрали щось нове та корисне з цієї статті. Залиште нам коментар, якщо у вас є класний flexbox трюк!