Растягиваем div на оставшуюся ширину: две колонки CSS
Быстрый ответ
Если нужно, чтобы div
занял оставшееся свободное пространство внутри контейнера, примените свойство flex-grow: 1;
.
.container {
display: flex;
}
.fill-remaining {
flex-grow: 1;
}
<div class="container">
<div>Левая колонка</div>
<div class="fill-remaining">Растягиваемая колонка... </div>
</div>
Создание раскладки с двумя колонками, где правая занимает всё открытое пространство, не так уж сложно!
Подробное объяснение
Настройка контейнера
Во-первых, ваш .container
должен быть определён как flex-контейнер:
.container {
display: flex; /* Этим мы устанавливаем правила внутренних отношений! */
height: 100%; /* Задача – использовать полностью доступный объём! */
}
Чтобы div
заполнил вертикальное пространство контейнера по всей высоте, установите height: 100%;
. Обратите внимание, что высота в 100% должна быть задана и для html
, и для body
.
Левая колонка с динамическим содержимым
Левая колонка предназначена для динамического контента и должна иметь масштабируемую ширину. Здесь не требуются flex
-свойства, достаточно width: auto;
или, при необходимости, установите минимальную и максимальную ширину:
.variable-width {
width: auto; /* либо min-width/max-width */
}
Растягивание правой колонки
Для того чтобы правая колонка расширилась и заняла все свободное пространство, используйте flex-grow: 1;
:
.fill-remaining {
flex-grow: 1; /* Растём вместе с увеличением возможностей! */
overflow: hidden; /* Я, как ниндзя, незаметен и эффективен! */
}
Свойство overflow: hidden;
помогает избежать различных трудностей, связанных с внутренней геометрией элементов.
Избавляемся от перекрытия
С flex-контейнером вам не придётся беспокоиться о том, что элементы могут перекрываться — как это случается с float-элементами. Флексбокс идеально подходит для создания адаптивных и гибких раскладок.
Визуализация разметки
В ходе разработки разработчику может быть полезно временно использовать фоновые цвета или границы для визуального представления разметки:
.variable-width {
background-color: lightblue; /* Посмотрите, где всё расположено! */
}
.fill-remaining {
background-color: lightgreen; /* Пока ярко, но это временно! */
}
Не забудьте удалить эти визуальные пометки перед публикацией, чтобы сохранить чистоту и нейтральность интерфейса.
Волшебство Calc
Когда размер колонки должен определяться содержимым или другими факторами, ёмко пригодится calc()
для точных математических расчётов:
.fill-remaining {
width: calc(100% – 200px); /* Математика всегда к месту! */
}
Так можно убедиться, что размер правой колонки адаптируется к изменениям размеров сопутствующего элемента.
Учет старых браузеров
Если необходима поддержка старых браузеров типа IE6/7, то следует учесть их специфические особенности, вроде hasLayout
. Однако с приходом flexbox в современной веб-разработке это становится всё менее актуально.
Визуализация
Для наглядности можно представить эту задачу в виде поезда (🚆), прибывшего на станцию (🚉), и должен занять все свободное пространство:
Длина платформы: |==============================|
Длина поезда: |========🚆 |
Ваша задача — обеспечить создание условий, благодаря которым поезд способен растянуться на всю длину пути:
|==============================|
|========🚆====================|
Точно также ваш div будет растягиваться, чтобы занять все свободное пространство на платформе при помощи flex-grow: 1
.
Изучение работы с Flexbox
Flexbox — инструмент выравнивания и распределения
Flexbox предоставляет инструменты для выравнивания и распределения пространства между элементами внутри контейнера:
.container {
align-items: stretch; /* Время растянуться! */
justify-content: flex-start; /* Все на старт! */
}
Адаптивность во внимание
Медиа-запросы позволяют адаптировать раскладку к разным размерам экранов:
@media (max-width: 600px) {
.container {
flex-wrap: wrap; /* Управление занимаемым пространством. */
}
.fill-remaining {
width: 100%; /* Размер имеет значение! */
}
}
Отказ от хаотичной CSS
Для поддержания порядка и чистоты в CSS-коде:
- Группируйте селекторы похожего типа.
- Располагайте часто используемые свойства в начале файла стилей.
- Используйте сокращённые свойства.
- Комментируйте код для облегчения его понимания.
Полезные материалы
- Полное руководство по Flexbox от CSS-Tricks — Мастерство работы с Flexbox на ваших кончиках пальцев.
- Полное руководство по CSS Grid от CSS-Tricks — Изучите CSS Grid для полного контроля над раскладкой.
- Модель коробки в веб-разработке от MDN — Основы CSS box модели.
- Основные концепции flexbox от MDN — Основы flexbox для начинающих.
- Разнообразные примеры использования Calc() от CSS-Tricks —
calc()
– чёрная магия CSS! - Can I use... для поддержки Flexbox — Провека совместимости flexbox с рядом браузеров.
- Can I use... для поддержки CSS Grid — Узнайте о поддержке CSS Grid браузерами.