Создание фиксированных шапки и подвала с прокруткой в CSS

Быстрый ответ

Чтобы создать фиксированную шапку и подвал со скроллируемым контентом в центре, в CSS установите для шапки и подвала свойство position: fixed; и прижмите их к верхней и нижней части страницы с помощью top: 0; и bottom: 0; соответственно. Затем обеспечьте прокрутку содержимого с помощью overflow-y: scroll; и задайте его высоту с помощью height: calc(100vh – высотаШапки – высотаПодвала);. Не забудьте учесть padding, чтобы шапка и подвал не перекрывали содержимое страницы:

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 10;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  z-index: 10;
}

.content {
  padding-top: 50px;
  padding-bottom: 30px;
  overflow-y: scroll;
  height: calc(100vh – 80px);
  box-sizing: border-box;
}

Итак, ваша страница будет иметь фиксированную шапку и подвал с возможностью прокрутки содержимого.

Встреча Flexbox с прокруткой

Flexbox позволяет гибко управлять распределением пространства и отлично подходит для динамически изменяемых макетов.

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow-y: auto;
}

Flexbox избавит вас от необходимости вычислений высоты контента с помощью calc(), так как браузер самостоятельно справится с распределением пространства.

Структурированные макеты с применением Grid

CSS Grid идеален для тонкой настройки расположения элементов на странице.

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-row: 1;
}

.content {
  grid-row: 2;
  overflow-y: auto;
}

.footer {
  grid-row: 3;
}

Не забывайте задать margin: 0 для body, использовать height: 100% и включить box-sizing: border-box.

Соображения и советы

• Совместимость с браузерами: Обязательно проверьте работоспособность CSS-свойств в разных браузерах на ресурсах вроде caniuse.com.
• Тестирование на разных устройствах: Проверяйте выглядение вашей страницы на различных устройствах и экранах.
• Доступность: Убедитесь, что ваш сайт удобен для чтения с помощью экранных дикторов и управления с клавиатуры.
• Производительность: Старайтесь держаться простоты в макете для ускорения его загрузки.

Визуализация

Готовый макет можно визуализировать как посещение разных этажей на прозрачном лифте:

+---------------------+ <--- 🏠 Верх (Фиксированная шапка)
| Шапка               | 
+---------------------+
|                     |
| 🏞 Вид из окна      | <--- (Прокручиваемый контент)
| 🌇 Прокрутка        | 
|                     |
+---------------------+ <--- 🚪 Низ (Фиксированный подвал)
| Подвал              |
+---------------------+

Прокрутка контента оживляет страницу, делая её похожей на путешествие между различными уровнями.

Адаптивность с медиа-запросами

Медиа-запросы помогут вашему дизайну выглядеть корректно на различных устройствах.

@media (max-width: 768px) {
  .header {
    height: 40px;
  }
  .footer {
    height: 25px;
  }
  .content {
    padding-top: 40px;
    padding-bottom: 25px;
  }
}

Отладка типовых ошибок

• Перекрытие контента: Тщательно синхронизируйте отступы и высоту фиксированных элементов.
• Прокрутка содержимого: overflow присваивайте только блоку с контентом, а не его контейнеру.
• Адаптивность: Правильно используйте медиа-запросы, проценты и единицы вьюпорта.

Распространённые ошибки

• Избегайте ненужной сложности в стилях. Простота — лучшее решение.
• Всегда обнуляйте стандартные отступы body.
• Аккуратно используйте z-index, чтобы обеспечить верное положение элементов.

Полезные материалы

1. Полное руководство по Flexbox — Обзор использования Flexbox.
2. Position – CSS: Каскадные таблицы стилей — Статья на MDN о позиционировании элементов.
3. Создание фиксированного подвала — Пошаговое руководство.
4. Полное руководство по CSS Grid — Обзор создания макетов с использованием Grid.
5. Веб-дизайн — Как создавать прилипающие шапки и подвалы.