Размещение футера в нижней части экрана - весьма распространенная задача. Тем не менее, при реализации она может вызвать затруднения у начинающего разработчика.

Итак, в значительной части веб-проектов нужен футер, который остается в нижней части экрана при малом количестве контента и адаптивно смещается вниз, когда объем контента пересекает нижнюю границу экрана.

До появления CSS3 было трудно реализовать “липкий” футер, не зная его точную высоту. И хотя такой футер и называется “липким” (sticky), проблема не решается с помощью свойства position: sticky, так как такой подход может привести к блокированию контента.

Сегодня Flexbox является наиболее разумным вариантом решения данной задачи. Для родительского контейнера нужно использовать свойство flex-grow или его часто используемый сокращенный синтаксис flex (в приведенном ниже примере таким контейнером является элемент main).

flex-grow определяет сколько свободного пространства должно быть отведено текущему элементу относительно других элементов. Если значение этого свойства равно 0, размеры элемента, вообще, не будут изменяться. Поэтому для решения нашей задачи нужно использовать значение равное или больше 1. В примере приведенном ниже установлено свойство flex: auto, что автоматически устанавливает для flex-grow значение равное 1.

Во избежание нежелательного поведения для тега footer так же установлено свойство flex-shrink: 0. flex-shrink является противоположностью flex-grow, определяя, как элемент будет умещаться в родительском контейнере.

Спасибо за внимание.