Одно из негласных правил веб-сайтов — футер должен всегда прилипать к низу страницы. Если сайт делает начинающий веб-разработчик, то это может стать проблемой.
До того как появился CSS3, к сожалению простых решений не было. Поэтому придумывали разные «костыли», чтобы футер постоянно был прибит к низу страницы.
Вы скажете, можно использовать position:sticky
, но это будет не совсем правильно, т.к. футер может начать перекрывать контент.
С приходом CSS3 появилось решение — это Flexbox. Основной контейнер с контентом можно растянуть с помощью свойства flex-grow
. Прямой потомок flex-контейнера со значением flex-grow
, отличным от 0, будет стараться занять все свободное место. В примере использована короткая версия свойства flex: auto
. Она устанавливает для flex-grow
значение по умолчанию, то есть 1.
Для футера можно установить flex-shrink: 0
, чтобы предотвратить нежелательное поведение. Фактически это свойство противоположно flex-grow
. Оно контролирует сжатие элементов при нехватке места в родительском контейнере. Со значением 0 футер гарантированно сохранит свой исходный размер.
Оставьте ответ