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