Липкий footer на flexbox.
Футер всегда должен «прилипать» к низу страницы — это негласное правило дизайна веб-сайтов.
Для начинающих верстальщиков оно может превратиться в головоломку.
Эту проблему можно решить с помощью flexbox.
Реализация:
Контейнер с основным контентом можно растянуть с помощью свойства flex-grow. Прямой потомок flex-контейнера со значением flex-grow, отличным от 0, будет стараться занять все свободное место.
Родительский контейнер должен иметь свойство flex-direction: column и высоту 100vh или 100%, если он находится в body.
Для футера можно установить flex-shrink: 0, чтобы предотвратить нежелательное поведение.
Футер всегда должен «прилипать» к низу страницы — это негласное правило дизайна веб-сайтов.
Для начинающих верстальщиков оно может превратиться в головоломку.
Эту проблему можно решить с помощью flexbox.
Реализация:
Контейнер с основным контентом можно растянуть с помощью свойства flex-grow. Прямой потомок flex-контейнера со значением flex-grow, отличным от 0, будет стараться занять все свободное место.
Родительский контейнер должен иметь свойство flex-direction: column и высоту 100vh или 100%, если он находится в body.
Для футера можно установить flex-shrink: 0, чтобы предотвратить нежелательное поведение.