Некоторые современные способы крепления футера на сайте:

• Использование CSS Flexbox. 1 Для контейнера устанавливают свойства display: flex;, flex-direction: column; и min-height: 100vh;. 1 Затем для футера применяют margin-top: auto;, что позволяет ему аккуратно расположиться в нижней части страницы. 1 Таким образом футер сохраняет свою позицию независимо от количества контента и размеров экрана. 1
• Фиксированное позиционирование. 1 Используют свойство position: fixed;, и футер надёжно закрепляется в нижней части экрана. 1 При этом элементу body задают достаточный отступ, чтобы содержимое страницы не перекрывало футер. 1
• Использование сеточного макета. 3 Это более новая технология, чем Flexbox, и её также можно приспособить под прилипающий футер. 3
• Применение отрицательного нижнего margin у блока-обёртки. 3 В этом методе есть блок-обёртка, в котором находятся все блоки, кроме футера. 3 Этому блоку назначают отрицательный нижний margin, равный высоте футера. 3
• Использование отрицательного верхнего margin на футере. 3 В этой технике не нужен блок push, но требуется добавить дополнительный блок-обёртку вокруг контента, у которого задан нижний padding. 3 Это сделано для того, чтобы из-за отрицательного margin футер не поднимался вверх. 3