Заполнить остаток горизонтального пространства div в CSS

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

Проблему можно элегантно и быстро решить с помощью CSS Flexbox. Установите display: flex; для родительского контейнера и flex-grow: 1; для целевого блока div, который будет занимать все доступное горизонтальное пространство:

<div style="display: flex;">
  <div style="width: 100px;">Сайдбар</div>
  <div style="flex-grow: 1;">Основной контент</div>
</div>

Таким образом, второй div автоматически займет все свободное пространство по горизонтали.

Прикладное погружение для кодеров-рыцарей

Хотя быстрый ответ подойдет для большинства ситуаций, иногда требуется отрегулировать множество инструментов. Возможно, вам придётся столкнуться с устаревшими браузерами или составлять сложные макеты. Давайте рассмотрим несколько дополнительных вариантов решения нашей задачи.

Обтекание и отступы: винтажный подход

До эры Flexbox для расположения элементов на странице применялись плавающие элементы (floats). В комбинации с отступами (margin) они позволяли заполнять свободное пространство:

.left-div {
    float: left;
    width: 100px;
}

.right-div {
    margin-left: 100px;
}

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

Overflow: воспользуйтесь этой мощью

Интересен вариант со свойством overflow. Работая с плавающими элементами, оно создаёт новый Контекст Форматирования Блоков (BFC). Благодаря этому div ловко обходит элементы с обтеканием:

.right-div {
    overflow: auto;
    margin-left: 100px;
}

Display table: взгляд сквозь историю

Если вам важна поддержка старых браузеров, выбор display: table; и display: table-cell; для дочерних элементов может стать достойной альтернативой Flexbox. Это решение придаст макету гибкости и адаптивности, внесёт в ваш дизайн нотки "ретро":

.table-container {
    display: table;
    width: 100%;
}

.left-cell {
    display: table-cell;
    width: 100px;
}

.right-cell {
    display: table-cell;
}

Используйте .right-cell ширину auto для достижения максимальной совместимости.

Так, мы гарантируем кросс-браузерную совместимость — делаем ставку на Flexbox, но при этом поддерживаем работу в различных средах.

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

Представим веб-страницу в виде поезда с вагонами:

Локомотив (🚂): [DIV фиксированной ширины]
Вагоны (🚃🚃🚃): [Прочие элементы]
Пустые рельсы (🛤️): [Оставшееся горизонтальное пространство]

Ваша задача — добавить новый вагон так, чтобы он занял все свободное пространство:

🚂===🚃🚃🚃====================🚃 (Новый вагон, использующий оставшееся пространство)

Flexbox поможет реализовать эту идею в коде CSS:

.flex-container {
    display: flex;
}

.fixed-div {
    width: 150px;
}

.fill-remaining-div {
    flex-grow: 1;
}

Сравнение Flexbox и обтекания

Преимущества Flexbox:

• Автономность: элементы могут быть расположены вертикально без помощи других блоков.
• Адаптивность: элементы легко подстраиваются под размеры экрана.
• Единообразие: поведение не отличается в различных современных браузерах.

Несмотря на это, методы с использованием плавающих элементов (floats) до сих пор актуальны:

• Поддержка старых версий: работают даже в старых браузерах.
• Простота: для базовых макетов не требуются сложные решения.
• Доступность: являются частью традиционных техник верстки.

Преодоление возможных проблем

На пути разработчика нередко возникают преграды:

• Стилевые конфликты: следите за порядком наложения стилей.
• Управление Overflow: используйте overflow: hidden или overflow: auto, чтобы избежать неожиданных сюрпризов.
• Единицы измерения: для получения предсказуемых результатов придерживайтесь одного типа единиц измерения (px, rem и др.).

Не забывайте, что вам всегда на помощь можут прийти такие инструменты, как Chrome DevTools и Firefox Inspector. Они помогут анализировать и исправлять возникающие проблемы.

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

1. Полное руководство по Flexbox | CSS-Tricks — усовершенствуйте свои навыки верстки с Flexbox.
2. Основные концепции Flexbox – CSS: каскадные таблицы стилей | MDN — изучите ключевые принципы Flexbox.
3. CSS Flexbox (Гибкий контейнер) — легко доступное руководство по Flexbox.
4. Выравнивание блоков в Flexbox – CSS: каскадные таблицы стилей | MDN — освойте навыки выравнивания элементов.
5. CSS модуль "Гибкое расположение блоков" Уровень 1 — углубитесь в спецификацию от W3C.
6. Дизайн гибкого и удобного в поддержке кругового диаграммы на CSS с помощью SVG — Smashing Magazine — примеры изящных решений с использованием SVG.