Подгонка размера дочернего div под родительский: кроссбраузерное решение

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

Дабы пропорционально растянуть дочерний div относительно всей ширины родительского контейнера, укажите в CSS правило width: 100%;. Такое предписание надёжно выставит дочерний элемент до полной ширины родителя в любом браузере.

.child-div {
  /* Расширяем дочерний элемент до границ родительского контейнера */
  width: 100%;
}

Приложите этот класс к вашему дочернему div, и он непременно займёт всё возможное пространство в родителе!

<div class="parent-div">
  <div class="child-div">Бесконечность – не предел для этого div!</div>
</div>

Как бы волшебством, .child-div будет динамично подстраивать свои размеры в ответ на изменения размеров родителя.

Наилучшая консистентность с border-box

Включение свойства box-sizing: border-box; в ваш CSS гарантирует, что отступы и рамки будут включены в общую ширину элемента.

.child-div {
  /* Границы и отступы теперь являются частью общей ширины, и пусть это останется нежным секретом! */
  box-sizing: border-box;
}

Соблюдение стандартов

Используйте стандартное блочное поведение для div, устанавливая для дочернего элемента ширину auto. Это позволит ему автоматически подстраиваться под размер контейнера.

.child-div {
  /* Автоматическая адаптация, подобно тому, как мы адаптируемся после ёлочного праздника... */
  width: auto;
}

Позиционирование родителя

Свойство position родительского контейнера существенно. Если оно установлено как relative, дочерний элемент будет динамично менять свои размеры в зависимости от родительского контейнера.

Отступы внутри border-box

Используя box-sizing: border-box;, расположите отступы прямо внутри дочернего элемента, для обеспечения соблюдения его максимальной ширины в рамках родительского контейнера.

Отступ или поле: выбирайте свое пространство

Для организации пространства внутри элемента выбирайте поля. Если нужно обустроить пространство снаружи, не влияя на общую ширину, используйте отступ.

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

Представьте себе следующей образ:

Родительский контейнер – это картина в раме (🖼️), а дочерний div – это само художественное произведение (🎨):

🖼️ Рама: [     |     |     ]
🎨 Картина: [           ]

Цель: Картина идеально вписывается в раму.

🖼️ Рама: [           ]
🎨 Картина: [           ]

Чтобы достичь этой цели, устанавливаем для дочернего div ширину в 100% родительского контейнера:

.child-div {
  width: 100%;
}

И вот перед вами полотно, идеально умещающееся в раму, независимо от используемого браузера.

Избегание распространенных ошибок

Будьте осмотрительны: устаревшие методы, например использование display: table-cell;, могут привести к проблемам в вёрстке в старых браузерах, таких как IE версий до 8. Именно поэтому важна проверка CSS в разных браузерах, чтобы избежать нежелательных сюрпризов с совместимостью.

Обеспечение кроссбраузерной консистентности

Для уверенной гарантии кроссбраузерной консистентности используйте для дочерних div свойство box-sizing: border-box;. Это свойство поддерживается всеми современными браузерами, включая даже Internet Explorer начиная с 8-й версии.

Внутри CSS Box Model

Чтобы быть уверенными в своих макетах, полезно понимать модель коробки CSS. Используя box-sizing: border-box;, вы можете не волноваться о суммировании ширины, отступов и рамок – всё это становится частью общей ширины, без излишеств.

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

Для лучшего осмысления принципов обратитесь к этому практическому примеру: jsfiddle.net/U7PhY/2/.

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

1. Полное руководство по Flexbox | CSS-Tricks – детальное описание работы Flexbox для компоновки элементов.
2. Основные концепции flexbox – CSS | MDN – обстоятельный материал от MDN о базовых принципах Flexbox.
3. Как растянуть DIV на всю высоту окна браузера – метод по созданию div, занимающего всю высоту окна просмотра.
4. CSS Flexible Box Layout Module | Can I use... Support tables for HTML5, CSS3, etc – компас по совместимости элементов Flexbox в разных браузерах.
5. CSS Flexible Box Layout Module Level 1 – официальная спецификация W3C модуля Flexible Box Layout CSS.