Урок 29 · CSS

На короткой странице подвал не висит посередине

Если текста мало, подвал оказывается сразу под абзацем, а ниже пустой экран.

Почему это следующий шаг

Шапка уже остаётся сверху. Подвал должен стоять снизу, когда контента не хватает на экран.

Как сделать

Собери колонку на всю высоту окна: у body min-height: 100vh и display: flex по вертикали. Основному блоку дай flex: 1, чтобы он забрал свободное место. Подвал тогда встанет после этого места. На длинной странице ничего не ломается: подвал как и раньше идёт после текста.

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

Что проверить

• На странице из одного абзаца подвал у нижнего края окна.
• На длинной странице подвал после текста, а не поверх него.
• Нет второй полосы прокрутки у body.