Создание фиксированных шапки и подвала с прокруткой в 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
, чтобы обеспечить верное положение элементов.
Полезные материалы
- Полное руководство по Flexbox — Обзор использования Flexbox.
- Position – CSS: Каскадные таблицы стилей — Статья на MDN о позиционировании элементов.
- Создание фиксированного подвала — Пошаговое руководство.
- Полное руководство по CSS Grid — Обзор создания макетов с использованием Grid.
- Веб-дизайн — Как создавать прилипающие шапки и подвалы.