CSS: как растянуть div на оставшееся место в родителе

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

Для решения задачи заполнения прострелившегося пространства на веб-странице отлично подойдёт модель flexbox из CSS. Нужно применить свойство display: flex; к родительскому контейнеру и установить flex: 1; для элемента div, предназначенного для заполнения всего свободного пространства.

.container { display: flex; }
.expandable { flex: 1; } /* Здесь происходит черезвычайно удивительное */

<div class="container">
  <div>Статическое содержимое</div>
  <div class="expandable">Элемент, расширяющийся по мере возможности</div>
</div>

Такой подход позволит нам добиться адаптивного заполнения всего доступного пространства блоком div при помощи свойства flex-grow.

Сила flex-grow

Свойство flex-grow предоставляет элементу div возможность занимать свободное пространство внутри родительского контейнера. Если значение этого свойства равно 1, данный элемент расширится, чтобы занять весь оставшийся объем, в отличие от элементов с flex-grow: 0, которые останутся без изменений.

.static-div { flex-grow: 0; width: 100px; } /* Маленький, но важный */
.dynamite-div { flex-grow: 1; } /* Готов освободить все доступное пространство */

Таким образом, dynamite-div автоматически займёт все свободное пространство, создавая гармонично выглядящую композицию. Это обеспечит стабильность верстки независимо от изменений размеров контейнера.

Гибкость Flexbox

Flexbox заметно зарекомендовал себя как инструмент для создания поддающихся модификации макетов. С помощью flexbox можно строить и адаптивные структуры, применяя такие свойства, как min-width и max-width.

.fluid-div { flex: 1; min-width: 100px; max-width: 200px; } /* Устойчивый, но гибкий */

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

Эпоха float позади

До появления flexbox мы часто использовали float:left; и float:right; в сочетании с margin. Несмотря на то, что данный подход весьма работоспособен, он значительно уступает flexbox по гибкости и простоте управления.

#parent { width: 500px; }
#left-div { float: left; width: 100px; } /* Мы плаваем против течения */
#right-div { float: right; width: 100px; } /* Отщепенец пробивается сквозь толпу */
#center-div { overflow: auto; } /* Центровщик плывет по течению */

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

Представьте, что вы ставите предметы на книжную полку:

|Книга|Часы|(свободное пространство)|

На нашей полке есть место, и мы хотим, чтобы третий элемент, рамка в виде div, занимал всё доступное пространство:

До: |Книга | Часы |_______|

Добавим "рамку":

После:  |Книга | Часы |Рамка  |

Мы будем использовать CSS Flexbox, чтобы добиться нужного эффекта:

.shelf { display: flex; }
.book, .clock { flex: none; } /* Книги и часы на своих местах */
.frame { flex: auto; } /* Рамка занимает всё свободное пространство */

Теперь наша полка выглядит аккуратно и организованно, а рамка занимает всё оставшееся пространство.

Примечания по float

Работа с float часто требует аккуратного подхода к расположению элементов в HTML и обдуманного использования свойств переполнения. По сравнению с flexbox, этот метод является более сложным в управлении.

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

Flexbox популярен среди разработчиков и поддерживается большим числом современных браузеров. Если же вам необходимо поддержать обратную совместимость, можно использовать традиционные макеты на базе float или провести проверку поддержки.

Адаптивные макеты с помощью div

Flexbox – это надежный основатель для адаптивного дизайна. Используя медиа-запросы, можно менять свойства flex, чтобы обеспечить оптимальное отображение на дисплеях разного размера.

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

1. Полное руководство по Flexbox | CSS-Tricks — Обширный ресурс по использованию Flexbox.
2. Основы flexbox – CSS: Каскадные таблицы стилей | MDN — Надёжный источник знаний от MDN.
3. CSS Flexbox (Гибкая коробка) — Учебные материалы и примеры использования.
4. Новые вопросы по 'flexbox' – Stack Overflow — Живое обсуждение и примеры из практики.
5. Полное руководство по CSS Grid | CSS-Tricks — Для более сложного макетирования CSS Grid.
6. Основы макета сетки CSS – CSS: Каскадные таблицы стилей | MDN — Ещё одна подробная статья по вопросам CSS Grid от MDN.
7. Изучение CSS-макетов — Обзор современных подходов к верстке с использованием Flexbox.