Как расширить div на полную высоту с sticky footer в CSS

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

Для того чтобы блок div мог занимать всю высоту родительского элемента, примените CSS-свойство height со значением 100%. Помните, что это будет функционировать только в случае, когда у родительского элемента задана высота. Для распространения div на всю высоту окна браузера используйте vh в значении height: 100vh.

CSS

Скопировать код

.full-height {
  height: 100%; /* применяется, когда у родителя задана высота */
}
.viewport-height {
  height: 100vh; /* распространяется на всю высоту видимой части окна браузера */
}

Назначьте нужный класс своему div:

HTML

Скопировать код

<!-- В контейнере с заданной высотой -->
<div style="height: 300px;">
  <div class="full-height">Здесь я, протяжённый div!</div>
</div>

<!-- На всём экране -->
<div class="viewport-height">Я дохожу до небес!</div>

Если ваш div находится внутри других блоков, каждый родительский элемент должен иметь указанную высоту; в противном случае свойство height: 100% не будет функционировать.

Кинга Идем в IT: пошаговый план для смены профессии

Укрощение высоты: познакомьтесь с min-height

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

CSS

Скопировать код

.responsive-full-height {
  min-height: 100vh;
}

Если на странице есть элементы с фиксированной высотой, такие как шапка или подвал, используйте функцию calc с min-height, чтобы учесть их размеры:

CSS

Скопировать код

.content-with-footer {
  min-height: calc(100vh – 50px); /* учитывается подвал высотой 50px */
}

Современные рыцари: Flexbox и CSS Grid

Для безупречной адаптивной верстки без необходимости дополнительных высотных расчётов вам помогут flexbox или CSS Grid:

CSS

Скопировать код

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

.flex-item {
  flex: 1; /* Занимает все доступное пространство в контейнере */
}

А чтобы начать стилизацию с чистого листа, сбросьте отступы и поля:

CSS

Скопировать код

html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Позволяет дочерним элементам распространиться на весь экран */
}

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

Визуализируйте веб-страницу как здание, где каждый блок div — это этаж.

🏢 -> 🌐 : Здание соответствует полной высоте веб-страницы.

Чтобы макет div занял все доступное пространство от первого этажа до крыши, в CSS задайте height: 100%:

CSS

Скопировать код

div {
    height: 100%;
}

Ваш блок div теперь аналогичен лифту, который проходит через все этажи здания без остановок.

🔝🛗🔝: Быстрое движение от самого низа до вершины.

Маленькие, но важные детали: учтите нюансы

Хотите идеально растянуть элемент на всю высоту? Обратите внимание на следующие нюансы:

Для Safari на iOS используйте -webkit-fill-available с min-height.
Помните, что различие в высоте окон браузеров может вызвать проблемы, особенно в мобильной версии. Воспользуйтесь готовыми решениями с ресурсов типа Stack Overflow.
Свойство overflow пригодится, если содержание div превышает 100% высоты.
Для масштабирования и адаптивности предпочтительно использовать единицы rem для полей и отступов.
Если у дочерних элементов указан min-height, родительскому контейнеру назначьте position: relative.

Встроенный код поможет адаптировать страницу под параметры мобильных экранов:

CSS

Скопировать код

.full-height-mobile {
  min-height: 100vh; /* стандартная высота окна браузера */
  min-height: -webkit-fill-available; /* особые условия для iOS */
}

Элегантные решения: преодолеваем трудности

Понимание принципов работы HTML и базовых стилей поможет вам в создании идеального дизайна:

Всегда открывайте и закрывайте HTML-теги — это важно для структуры документа.
Прежде чем задать div на всю высоту, установите высоту для <body> или главного контейнера.
Используйте свойство background для создания интересного фона для div.
Учитывайте специфику отображения на устройствах различных размеров для создания адаптивного дизайна.

Следующий пример демонстрирует базовую структуру и сброс стилей для начала работы:

HTML

Скопировать код

<!DOCTYPE html>
<html lang="ru">
<head>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* Готовы к дальнейшему применению стилей */
    </style>
</head>
<body>
    <div id="full">Я полностью занимаю высоту окна браузера!</div>
    <!-- Здесь может быть дополнительный контент -->
</body>
</html>

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

Полное руководство по Flexbox | CSS-Tricks — станьте экспертом по flexbox и создавайте адаптивные макеты.
Полное руководство по CSS Grid | CSS-Tricks — изучите все нюансы работы с CSS Grid.
Введение в модель CSS Box – CSS: Cascading Style Sheets | MDN — для веб-дизайнера знание CSS Box Model является основой.
height – CSS: Cascading Style Sheets | MDN — подробное рассмотрение свойства height в CSS.
html – Как сделать div на 100% высоты окна браузера – Stack Overflow — рекомендации по созданию div на всю высоту экрана.
Как создать изображение на весь экран — как сделать фоновые изображения на весь экран с помощью CSS.
Can I use... Support tables for HTML5, CSS3, etc — сервис проверки поддержки различных свойств CSS и элементов HTML5 разными браузерами.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Как можно задать высоту блока div так, чтобы он занимал всю высоту видимой области окна браузера?

1 / 5

Свежие материалы

Что такое домен и хостинг и зачем они нужны?

6 сентября 2024

Инструменты для тестирования сайтов: обзор и сравнение

6 сентября 2024

Видео уроки по веб-разработке

6 сентября 2024