Компоновка с фиксированными подвалом и боковой панелью

Прилипающий нижний колонтитул остаётся внизу области просмотра, когда содержимое короткое, но сдвигается вниз вместе с содержимым, когда оно длинное. Исторически сложность заключалась в том, чтобы зафиксировать нижний колонтитул, не зная высоту содержимого и не используя JavaScript.

Самое простое современное решение: body { display: flex; flex-direction: column; min-height: 100vh; } и main { flex: 1; }. Основное содержимое расширяется, заполняя доступное пространство, и перемещает нижний колонтитул вниз независимо от длины содержимого.

Альтернатива на основе CSS Grid: body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }. Шапка получает автоматическую высоту, основное содержимое — 1fr (заполняет оставшееся пространство), нижний колонтитул — автоматическую высоту. Чистое и явное решение: шаблон строк ясно показывает замысел макета.

position: sticky; bottom: 0 прикрепляет нижний колонтитул к нижней границе области просмотра во время прокрутки, но только если это допускает его контекст прокрутки. Подходит для нижних колонтитулов внутри прокручиваемого контейнера, но менее уместно для прилипающих нижних колонтитулов страницы, где флексбокс или сетка дают более чистое решение.

Макет с боковой панелью и основным содержимым: wrapper { display: flex; }, sidebar { width: 280px; flex-shrink: 0; }, main { flex: 1; min-width: 0; }. Указание min-width: 0 для основного содержимого предотвращает переполнение контейнера элементами флексбокса, когда они содержат широкое содержимое.

Сетка с боковой панелью: wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }. Столбец боковой панели имеет фиксированную ширину, а столбец содержимого заполняет оставшееся пространство. Добавьте строку шапки: grid-template-rows: auto 1fr, при этом боковая панель должна занимать обе строки.

На мобильных устройствах сворачивайте боковую панель над или под основным содержимым: с помощью медиазапроса переключайтесь с макета в виде столбцов сетки на стек из одного столбца. Или используйте grid-template-columns: min(280px, 30%) 1fr для гибкой боковой панели, которая сжимается в областях просмотра меньшего размера.

Сделайте боковую панель прокручиваемой независимо: sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Боковая панель остаётся в поле зрения, пока прокручивается основное содержимое, что особенно удобно для навигации или оглавления на длинных страницах.

Сворачиваемая боковая панель переключается между состоянием на всю ширину и состоянием только со значками. Используйте пользовательское свойство CSS для ширины боковой панели: --sidebar-width: 280px на оболочке, а с помощью класса переключайте её на 64px. Переходы плавно анимируют изменение ширины.

Боковая панель с фиксированным позиционированием (position: fixed; left: 0; top: 0; height: 100vh) требует сместить основное содержимое на ширину боковой панели: main { margin-left: 280px }. На мобильных устройствах боковая панель выезжает поверх содержимого; для неё нужны кнопка закрытия и фоновая подложка.

Помечайте боковые панели навигации с помощью <nav> и aria-label="Sidebar navigation". Для сворачиваемых боковых панелей нужна доступная кнопка переключения с атрибутами aria-expanded и aria-controls. Ссылки для пропуска помогают пользователям клавиатуры обойти боковые панели и перейти к основному содержимому.

Зачем в макете с боковой панелью для элемента флексбокса, содержащего основное содержимое, задавать min-width: 0?

Флексбокс с flex: 1 у основного содержимого или сетка из трёх строк позволяют создать аккуратные прилипающие нижние колонтитулы с минимальным количеством CSS. В макетах с боковыми панелями используются фиксированные или гибкие определения столбцов с адаптивными контрольными точками для сворачивания на мобильных устройствах. Прилипающие боковые панели, изменяемая ширина и доступные атрибуты ARIA завершают готовые к эксплуатации шаблоны боковых панелей и нижних колонтитулов.