CSS: Заполнение высоты экрана между header и footer

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

Чтобы контент занимал всю высоту экрана, достаточно применить свойство height: 100vh;:

.main-content {
    height: 100vh;  /* Всё просто! 🎩✨ */
}

Единица vh обозначает Высоту Видимой Области Браузера (Viewport Height), где 100vh эквивалентен полной высоте видимой области. Однако, будьте внимательны: при наличии шапки и подвала в макете возможны сложности. Как с ними справиться – читайте далее!

Макет с шапкой и подвалом

Если в вашем случае присутствуют блоки header и footer, потребуется другой подход. Приведу два эффективных решения для корректной регулировки основного блока контента:

Метод c использованием Flexbox

CSS Flexbox поможет вам с этой задачей:

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

header, footer {
    height: 40px; /* Скролл, прощай! */
}

.main-content {
    flex-grow: 1; /* Пусть div заполняет пространство! */
}

Таким образом мы динамически распределяем пространство между шапкой и подвалом.

Подробнее об этом расскажет наш спикер на видео

Метод с применением CSS Grid

CSS Grid – это ещё один надёжный способ:

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

header {
    grid-row: 1;
}

.main-content {
    grid-row: 2;  /* Основное место под солнцем */
}

footer {
    grid-row: 3;
}

Здесь основной контент настроен так, чтобы заполнить пространство и придать подвалу постоянное положение в нижней части экрана.

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

Представьте, что вы – архитектор, строящий высотное здание (ваш контент), размеры которого должны точно соответствовать высоте конструкции (экрану устройства):

🏢 (Контент) 
📐 (Высота экрана)

CSS Flexbox станет вашим надёжным инструментом в построении, обеспечивая идеальное соответствие контента высоте экрана. И это будет гораздо тише настоящего строительства. 🚧👷‍♂️

Любовь к подвалам и динамичному контенту

Укрощение подвалов

Для фиксации подвала отлично подойдут flexbox или абсолютное позиционирование.

.footer {
    margin-top: auto;  /* Скролл здесь неприкасаем! */
}

Или вариант с абсолютным позиционированием:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;  /* Занимай всю ширину! */
}

Управление переполненным контентом

Ваш контент должен вести себя дисциплинированно и не вызывать появление скролла из-за отсупов:

.main-content {
    padding-bottom: 40px; /* Контент, учтите подвал! */
}

Если контент выходит за рамки, то применение overflow: auto; поможет держать все под контролем:

.main-content {
    overflow-y: scroll;  /* Сюда вам не пройти! */
}

Дружба со всеми браузерами

Единицы вьюпорта в старых браузерах

Старые браузеры могут быть незнакомы с vh. В таких случаях работает классический подход:

html, body {
    height: 100%;  /* По доброй старой схеме */
}

.main-content {
    min-height: 100%;  /* Потому что вы заслуживаете большего */
}

Запасные варианты для Flexbox и Grid

Для тех браузеров, что ещё придерживаются устаревших стандартов и не поддерживают Flexbox или Grid:

.container {
    display: table;  /* Сегодня я – таблица */
    width: 100%;
    height: 100%;
}

.header, .footer {
    display: table-row;
    height: 1px; /* Важность деталей */
}

.main-content {
    display: table-cell;  /* Старомодно, но работает */
    vertical-align: top;
}

Эти классические приёмы CSS как волшебные заклинания имитируют поведение Flexbox и Grid.

Диалог с различными устройствами

Адаптивный дизайн

Оформите свой блок контента как хамелеона, который умеет маскироваться под различные экраны. Как? Используйте медиа-запросы и относительные единицы:

@media screen and (max-width: 768px) {
    .main-content {
        height: auto;  /* Когда размер важен */
        padding-bottom: 60px; /* Даем место подвалу */
    }
}

Недружелюбные элементы интерфейса

На мобильных устройствах элементы UI часто забирают под себя часть контента. Чтобы этого избежать, используем calc():

.main-content {
    height: calc(100vh – 50px); /* Оставляем 50 пикселей для шапки и подвала */
}

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

1. Полное руководство по Flexbox | CSS-Tricks — незаменимый источник для освоения и практического применения CSS Flexbox.
2. Основные концепции flexbox – CSS: Каскадные таблицы стилей | MDN — официальная документация Mozilla, раскрывающая основы flexbox.
3. CSS Flexbox (Гибкий Бокс) — материалы от W3Schools с наглядными примерами использования flexbox.
4. Полное руководство по CSS Grid | CSS-Tricks — подробное руководство по свойствам и концепциям CSS Grid.
5. Сеточная верстка CSS – CSS: Каскадные таблицы стилей | MDN — глубокое погружение в сеточную верстку CSS Grid от Mozilla с примерами и рекомендациями.
6. Липкий подвал пятью способами | CSS-Tricks — различные методы создания липкого подвала на CSS.
7. Создание production-ready макета с использованием CSS Grid сегодня — Smashing Magazine — продвинутое руководство по созданию масштабируемых и устойчивых к изменениям макетов с использованием CSS Grid.