CSS-макет с минимальной высотой 100%: header, footer, content

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

Для того, чтобы контейнер занимал всю высоту экрана, ему следует задать параметр min-height: 100vh;. Это обеспечит его расширение до полной высоты окна браузера, независимо от объема содержимого.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  min-height: 100vh;
  position: relative;
  padding-bottom: 50px;
  background: #f8f8f8;
  margin: 0 auto;
  width: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
}

<div class="container">
  <div class="content">
    <!-- Размещайте сюда ваше содержимое -->
  </div>
  <div class="footer">
    <!-- Футер, расположенный внизу страницы -->
  </div>
</div>

Фиксированные шапка и футер

Если на странице присутствуют фиксированные шапка или футер, значение min-height можно скорректировать с помощью функции calc(). Это позволит избежать выхода их за границы экрана.

.content {
  min-height: calc(100vh – (80px + 70px)); // высота шапки и футера
}

Адаптивное изменение размеров содержимого

Воспользуйтесь функцией calc() для динамического изменения min-height, чтобы учесть высоту фиксированных шапки и футера:

.content {
  min-height: calc(100vh – (height_of_header + height_of_footer));
}

Управление переполнением

При необходимости контролировать переполнение содержимого внутри элемента и поддерживать удобство прокрутки используйте следующую конструкцию:

.content {
  min-height: calc(100vh – (height_of_header + height_of_footer));
  overflow-y: auto; // Включает вертикальную прокрутку при переполнении
}

Кроссбраузерность

Чтобы макет корректно отображался в различных браузерах, проверяйте его работоспособность при разных размерах текста и окна просмотра:

.container {
  min-height: 100vh;
  -webkit-min-height: 100vh;
  -moz-min-height: 100vh;
  -ms-min-height: 100vh;
  box-sizing: border-box;
}

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

Как и сад, требующий периодической обрезки и полива, веб-макет нуждается в обновлении, чтобы идеально соответствовать высоте окна.

🌳 Сад (HTML)                     | 🌧️ Сезонная погода (CSS)
---------------------------------  | ------------------------------
                                  |   ⛅ Весна: Растения начинают цвести
| Растения выходят из-под земли   |   🍂 Осень: Растения становятся меньше
                                  |     
                                  |   * Сезонные изменения корректируют высоту растений
------------------------------

Макет будет адаптироваться под изменение высоты окна, так же, как и растение подстраивается под сезонные изменения.

Лучшие практики

Наследование высоты от родителя к потомку

Для того, чтобы потомок мог наследовать высоту родительского элемента, установите для родителя минимальную высоту:

.parent {
  min-height: 1px; // Трюк для включения наследования
}
.child {
  height: 100%; // Потомок берет все от родителя
}

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

Зафиксированный футер

Чтобы футер всегда был на экране, в нижней его части, воспользуйтесь свойством flex-grow:

body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1; // Заполняет все свободное пространство или растягивается
}

Практические примеры

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

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

1. CSS-Tricks – Полное руководство по Flexbox
2. MDN – Основы Flexbox
3. W3Schools – Учебник по Flexbox
4. Smashing Magazine – Дизайн с использованием CSS
5. Codrops – Справочник по CSS Grid
6. StackOverflow – Решения для блока div на всю высоту экрана
7. DigitalOcean – Учебник по CSS Grid Layout