Липкий футер- css -эффекты

0
330

Футер всегда должен «прилипать» к низу страницы — это негласное правило дизайна веб-сайтов. Для начинающих верстальщиков оно может превратиться в головоломку. Как растянуть контейнер, если контента в нем мало, но при этом избежать переполнения при большом количестве текста?

До CSS3 не было простого способа решить эту проблему. Приходилось использовать разного рода трюки и почти всегда устанавливать для подвала фиксированную высоту.

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

К счастью, сейчас решение есть — это Flexbox. Контейнер с основным контентом можно растянуть с помощью свойства . Прямой потомок flex-контейнера со значением , отличным от 0, будет стараться занять все свободное место. В примере использована короткая версия свойства . Она устанавливает для  значение по умолчанию, то есть 1.

Для футера можно установить , чтобы предотвратить нежелательное поведение. Фактически это свойство противоположно . Оно контролирует сжатие элементов при нехватке места в родительском контейнере. Со значением 0 футер гарантированно сохранит свой исходный размер.

See the Pen
Sticky Footer
by Bret Cameron (@BretCameron)
on CodePen.

источник