На замітку досвідченому верстальщику: Кращий спосіб зробити липкий футер

image

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

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


ТЕХНІКА

Я почну будувати нашу сторінку з допомогою верстки адаптивних блоків. Хто ще досі не знає, але починаючи з 21 квітня 2015 року Гугл ввів нові методи ранжирування сайтів, в основі якого лежить адаптивний дизайн сайту. Якщо Ваш сайт не має адаптивного дизайну, Ваш ресурс буде знижуватися у видачі пошукової системи. Ось воно диво мобільних пристроїв. Для тих, хто не зовсім в курсі, що таке адаптивні блоки і з чим їх їдять, я залишу пару посилань в кінці статті.

Моя демонстраційна сторінка буде сама що ні на є проста. Складатися він буде з трьох основних частин:

  • Заголовка(head);
  • основний розділ (main section);
  • футер(footer);


Ось вам приклад html-коду, нічого в ньому надприродного немає.

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


Першим ділом додамо display: flex body, і додамо напрямок напрямок для flex-елементів розміщених на нашій сторінці (за замовчуванням flex-direction: row; розташування об'єктів зліва направо для ltr, і справа наліво для rtl). Крім цього додамо height: 100%; для того, щоб заповнити весь екран.

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


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

  • flex-grow – Визначає для flex-елемента можливість «виростати» при необхідності
  • flex-shrink – Визначає для flex-елемента можливість стискатися при необхідності
  • flex-basis — Визначає розмір за замовчуванням для елемента перед розподілом простору в контейнері


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

header{
flex: 0 0 auto;
}

.main-content{
flex: 1 0 auto;
}

footer{
flex: 0 0 auto;
}


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

image

Висновок

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

Я сподіваюся, що Вам сподобався мій спосіб створення простих липких футеров і що Ви знайшли в цій статті щось нове і корисне для себе. Залишайте свої коментарі, якщо у вас є свій крутий трюк з адаптивними блоками, напишіть мені.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.