5 способів створити прилипає футер

19

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

Негативний нижній margin у блоку-обгортки

Є блок-обгортка, в якому знаходяться всі блоки крім футера. Цим блоком призначений негативний нижній margin, рівний висоті футера.

content

html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}

У даному методі потрібно додатковий елемент в контенті (з класом .push), щоб негативний margin не притягнув футер і не перекрив область тексту. Додати блок push було досить розумним рішенням, так як у нього немає ніяких нижніх відступів. Якщо б у цього блоку був би свій відступ, його б довелося врахувати в негативному margin’е.

Негативний верхній margin на футері

У цій техніці не потрібен блок push, але тут потрібно додати додатковий блок-обгортку навколо контенту, у якого задано нижній padding. Це зроблено для того, щоб із-за негативного margin’а футер не піднімався вгору.

content

html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}

Обидві техніки схожі, так як в них потрібно додати додатковий HTML елемент.

Функція calc() зменшує висоту обгортки

Один із способів відмовитися від додаткової розмітки це налаштувати висоту блоку-обгортки з допомогою функції calc(). В такому випадку не буде перекриття, два елементи з’єднуються і утворюють висоту до 100%.

content

.content {
min-height: calc(100vh — 70px);
}
.footer {
height: 50px;
}

Зверніть увагу на 70px у функції calc() і 50px фіксованої висоти футера. Тут ми враховуємо, що у футера є нижній margin у 20px. Із загальної висоти необхідно відняти висоту футера і його нижній зовнішній відступ. Ми також використовуємо одиниці виміру vw, щоб не ставити 100% висоти body, поки не задано 100% висоти блоку обгортки.

Flexbox

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

content

html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}

Можна навіть додати хедер зверху або щось ще. Flexbox можна використовувати двома способами:

flex: 1 на дочірньому елементі для заповнення простору (контенту в нашому випадку).

Або margin-top: auto для зсуву дочірніх елементів якомога далі один від одного (або будь-якому іншому напрямку margin’а).

Сітка

Сітковий макет ще більш нова технологія, ніж Flexbox (і з набагато меншою підтримкою). Сітки також можна легко пристосувати під прилипає футер.

content

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}

Демо повинно працювати в Chrome Canary і Firefox Developer Edition. По ідеї, його можна перенести під стару версію сітки для Edge: