Футер всегда должен «прилипать» к низу страницы — это негласное правило дизайна веб-сайтов. Для начинающих верстальщиков оно может превратиться в головоломку. Как растянуть контейнер, если контента в нем мало, но при этом избежать переполнения при большом количестве текста?
До CSS3 не было простого способа решить эту проблему. Приходилось использовать разного рода трюки и почти всегда устанавливать для подвала фиксированную высоту.
Также не поможет и свойство position:sticky, хотя, казалось бы, оно специально предназначено для создания липких элементов. Но зафиксированный таким образом футер может перекрывать контент.
К счастью, сейчас решение есть — это Flexbox. Контейнер с основным контентом можно растянуть с помощью свойства flex-grow. Прямой потомок flex-контейнера со значением flex-grow, отличным от 0, будет стараться занять все свободное место. В примере использована короткая версия свойства flex: auto. Она устанавливает для flex-grow значение по умолчанию, то есть 1.
Для футера можно установить flex-shrink: 0, чтобы предотвратить нежелательное поведение. Фактически это свойство противоположно flex-grow. Оно контролирует сжатие элементов при нехватке места в родительском контейнере. Со значением 0 футер гарантированно сохранит свой исходный размер.
See the Pen
Sticky Footer by Bret Cameron (@BretCameron)
on CodePen.
