Ефективний спосіб створення "липкого" футера
При розробці веб-макетів, в якийсь момент ви, ймовірно, зіткнетеся з цією проблемою:
Таке трапляється коли нижній колонтитул позиціонується статично в кінці тега body, а контент не займає достатньо простору. Там немає нічого, що могло б підштовхнути футер вниз, і він розміщується в центрі екрану, залишаючи велику площу вільного місця під ним.
В цьому швидкому туторіалі ми розглянемо сучасні техніки розміщення футерів, які будуть гарантовано залишатися в самому низу сторінки весь час.
Техніки розміщення
Для того щоб запобігти результату зверху, ми будемо розробляти нашу сторінку за допомогою flexbox - найбільш сучасного інструменту CSS3 для створення адаптивних макетів.
Для тих хто не знайомий з flexbox і його властивостями, ми залишимо пару посилань в кінці статті.
Наша демо сторінка матиме верхівку, головну секцію, футер. Звичайний HTML нічого нового.
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Для того щоб почати користуватися 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;
}
Щоб побачити техніку в дії, перевірте сторінку конфігурацій, натиснувши на зображення нижче. Використовуючи рожеву кнопку, ви можете змінити кількість контенту.
Як ви можете бачити flexbox є гарним помічником при створенні макетів з нуля. Всі основні браузери підтримують його з деякими незначними винятками, тому його можна використовувати у всіх IE9+ проектах.
Ось матеріал для ознайомлення з flexbox детальніше:
Ми сподіваємося, що вам сподобався наш спосіб створення липких колонтитули і що ви підібрали щось нове та корисне з цієї статті. Залиште нам коментар, якщо у вас є класний flexbox трюк!
1144 7
Коментарі:
0
Андрій Захарко
Flexbox вирішує дуже багато проблем з позиціонуванням блоків на сторінці. Але "липкий" це трішки не те визначення для описаного в статті.
ІМХО "Липкий" це тоді, коли завжди на визначеному місці (при прокрутці сторінки). А тут вже одним Flexbox-сом не обійдеться. Ситуація ускладнюється, коли той липкий блок не має перекривати інший важливий блок...