Подвал внизу короткой страницы без position: fixed
Собираем макет, в котором подвал остаётся после содержимого и не перекрывает текст.
Задача и ограничения
На короткой странице подвал хочется видеть у нижнего края окна. На длинной он должен идти после статьи. position: fixed не решает эту задачу: закреплённый подвал может перекрыть последние строки и поля формы.
Пошаговое решение
Сделайте оболочку страницы flex-контейнером с вертикальным направлением. Задайте ей минимальную высоту окна. Основной области дайте flex: 1 — она займёт свободное место между шапкой и подвалом.
В реальном документе оболочкой может быть body. В песочнице используем отдельный .page, чтобы пример не зависел от окружающей страницы. Для мобильного viewport можно последовательно объявить 100vh, затем 100svh как более подходящий вариант в поддерживающих браузерах.
Код компонента
<style>
.page { min-height: 300px; display: flex; flex-direction: column; background: #f4f7f5; }
.page header, .page footer { padding: 16px; background: #dcece2; }
.page main { flex: 1; padding: 20px; }
</style>
<div class="page"><header>Название сайта</header><main><h2>Короткая страница</h2><p>Основная информация.</p></main><footer>Контакты и документы</footer></div>Что может пойти не так
Как проверить результат
- Оставьте один короткий абзац.
- Добавьте десять абзацев и проверьте, что подвал ушёл вниз после текста.
- Проверьте, что ни одна строка не перекрыта подвалом.
Разберите также: свойство flex, тег footer.