Вёрстка Junior Вёрстка на практике обновлено
Подвал прижат к низу
Условие
Подвал .footer прижат к низу .page даже при коротком содержимом, но не перекрывает содержимое при длинном. Высота .page фиксирована 300px. Абсолютное позиционирование нельзя.
Что проверяют тесты
колонка
содержимое растягивается
подвал внизу
без абсолютного позиционирования
Как подойти
Приём «липкий подвал» без абсолютного позиционирования: колонка и flex-grow на среднем блоке. Работает и когда содержимого много - тогда растягиваться нечему и подвал просто идёт следом. Через grid то же самое: grid-template-rows: 1fr auto.
Подсказки: 2
- Колонка плюс растягивающийся средний блок.
- flex: 1 на содержимом займёт всё свободное место.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.