CSS: растягиваем B2 div до полного размера родительского без D

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

Для того, чтобы элемент <div> занимал всю высоту родителя в CSS, примените:

.child-div {
  height: 100%;
}

Желательно также задать высоту родительскому <div>:

<div style="height: 200px;">
  <div class="child-div" style="height: 100%;">
    Содержимое находится здесь
  </div>
</div>

Таким образом, размер дочернего элемента будет соответствовать размеру родителя, если у последнего явно указана высота. Если необходимо динамически изменять высоту, следует воспользоваться flexbox или grid.

Использование flexbox для адаптивной верстки

Flexbox позволяет динамически подстраивать высоту дочерних <div> под размеры родителя, что актуально для современной адаптивной верстки:

.parent-div {
  display: flex;
  flex-direction: column;
}

.child-div {
  flex-grow: 1;
}

Учет отступов и границ элементов

Не забывайте учитывать отступы и границы, применив box-sizing: border-box;:

.child-div {
  box-sizing: border-box;
}

Использование данного свойства позволит вам включить внутренние отступы и границы в общую высоту div.

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

Предотвращение проблем с переполнением контентом

Для избегания проблем с выходом контента за границы элемента используйте overflow: auto; или overflow: hidden;:

.child-div {
  overflow: auto;
}

или

.child-div {
  overflow: hidden;
}

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

Сравнение процесса растяжения div и примера с подбором подходящего размера джинсов:

| Ситуация                | Подбор размера джинсов | Эквивалент в CSS         |
| ------------------------ | ------------------------- | ------------------------ |
| Слишком короткие         | 👖🤏                       | height: auto;            |
| Идеальная посадка        | 👖✨                       | height: 100%;            |
| Необходимость использования ремня (контейнера) | 👖🔗👕                   | height: inherit;         |

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

Родительский Div (📦): [ Содержимое (📄) ]
Дочерний Div (👖): [ Растягивается для идеальной посадки (✨) ]

Реализация полноэкранных макетов с использованием высоты в 100%

Реализация полноэкранного макета возможна с помощью установки высоты 100% для html и body:

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

Для полного контроля используйте абсолютное позиционирование:

.parent-div {
  position: relative;
}

.child-div {
  position: absolute;
  top: 0;
  bottom: 0;
}

Учет динамического содержимого: использование min-height

Для адаптации к изменяющемуся содержимому примените min-height:

.child-div {
  min-height: 100%;
}

Адаптивность и отзывчивый дизайн

Следует использовать flexbox для адаптивности, которая позволяет подстраиваться под разные размеры экрана и ориентации устройств:

.parent-div {
  display: flex;
  flex-direction: column;
}

.child-div {
  flex: 1;
}

Настройка размеров div с помощью CSS Grid

С использованием CSS Grid вы получаете гораздо больший контроль над размерами div:

.parent-div {
  display: grid;
  grid-template-rows: 1fr;
}

.child-div {
  /* Дочерние элементы занимают все выделенное пространство строки */
}

Обеспечение совместимости с различными браузерами

Проверяйте свои макеты в различных браузерах, чтобы быть уверенными в их совместимости.

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

1. Полное руководство по Flexbox | CSS-Tricks — всё об использовании Flexbox в CSS.
2. Основные понятия flexbox – CSS: Cascading Style Sheets | MDN — пояснения об основах работы с flexbox.
3. CSS Flexbox (Гибкое Блоковое Устройство) — уроки по flexbox в CSS с примерами.
4. Понимание Flex-grow, Flex-shrink и Flex-basis — обсуждение на Stack Overflow по свойствам flexbox.
5. Демонстрация работы Flexbox на CodePen — интерактивная демонстрация, где можно увидеть программное действие flexbox.
6. Как заставить дочерние элементы Flexbox занимать 100% высоты родителя — обсуждение на Stack Overflow о решении задачи захвата всей высоты родителя дочерними элементами flexbox.