У мережі багато інформації про те, як притиснути футер до низу сторінки, але якщо ви використовуєте bootstrap більшість рішень не підійдуть.
Складність може полягати ще й у тому, що у контейнера повинні бути тіні по краях.
Є рішення, де футера задається position: absolute. а батьком виступає тег html. Цей варіант хороший до тих пір, поки на вашій сторінці не з'являються інші елементи, які необхідно абсолютно позиціонувати. Починається війна верстальника і браузера. Абсолютне позиціонування потрібно використовувати тільки там, де інші варіанти не підходять.
Можна вирішити задачу за допомогою JS-скрипта. Футера присвоюється заздалегідь визначений клас, якщо висота контенту сторінки менше, ніж висота вікна браузера. Це теж ненадійне рішення: висоту ми визначимо тільки, коли сторінка повністю завантажиться. Елементи на сторінці будуть скакати. Все це упячка.
Ми не станемо вантажити сторінку скриптами. Ось що вийшло:
1) стилі блоку .wrapper повинні бути вказані після стилів .container щоб не перебивався margin-bottom;
2) колір фону потрібно задати блоку .wrapper. а колір тіней або рамки - блоку .container;
Вконтакте Зафейсбучіть Отоднокласcіть