Две div области: фиксированная ширина и остаточный размер в CSS

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

Для создания адаптивного макета рекомендуется использовать flex-контейнер. Один div задается с фиксированной шириной, второй div заполнит все оставшееся пространство. Установите стиль контейнера display: flex;, для div с фиксированным размером задайте flex: 0 0 200px;, а для второго div определите flex-grow: 1;.

<div style="display: flex;">
  <div style="flex: 0 0 200px; background: #add8e6;">Фиксированный</div>
  <div style="flex-grow: 1; background: #f08080;">Остаток пространства</div>
</div>

Div с фиксированным размером останется неизменным, второй div адаптируется под оставшуюся ширину.

Гибкость с помощью flexbox

Flexbox — это мощный инструмент для создания гибких и адаптивных макетов. Этот способ имеет преимущество благодаря своей удобной и понятной манере применения в отличие от традиционных подходов, таких как float или absolute positioning.

Альтернативные решения и техники

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

Метод Display: table

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

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

Методы с обтеканием

Возможно использовать обтекание блоков с помощью float: left; и float: right;, но важно не забывать о том, что после этого требуется очистка обтекания с использованием overflow: hidden; для контейнера или применения clearfix. Данный метод менее всеобъемлющий, но подходит для простых макетов.

Абсолютное позиционирование

Абсолютное позиционирование доступно с использованием left: 0; и right: 250px;, для достижения желаемой разметки. Однако, этот способ требует аккуратности и тщательного управления потоком элементов.

Тестирование в разных браузерах

Всегда проверяйте верстку в различных браузерах и используйте caniuse.com, чтобы избежать неожиданных сюрпризов, особенно в старых версиях браузеров, таких как IE6.

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

Представьте себе макет, как парковку: есть места с фиксированной шириной для VIP (🚗🔒), остальные места гибки и могут принимать автомобили разных размеров (🚗...🚗):

Парковка: | [VIP 🚗🔒 (Фиксированный)] | [Обычные 🚗...🚗 (Гибкий)] |

Что эквивалентно:

<div style="width: 200px;">🚗🔒</div>
<div style="flex: 1;">🚗...🚗</div>

Место VIP остаётся неизменным, обычные места подстраиваются под нужды.

Использование calc() для повышения точности управления шириной блока

Когда требуется особенный уровень контроля, которого нельзя достичь с помощью flexbox или display: table, функция CSS calc() становится незаменимым инструментом. Она позволяет динамически вычислять размеры, что незаменимо в responsive дизайне.

.fixed-div {
  width: 200px; /* Вы ограничены здесь 200px */
}

.flexible-div {
  width: calc(100% – 210px); /* И я, и мой скейтборд найдем место здесь! */
}

Добавьте margin-left: 10px;, чтобы обеспечить пространство между блоками.

Учёт сложных случаев

Используйте min-height для первого div, чтобы избежать его схлопывания, когда внутри него недостаточно содержимого. Обдумайте порядок размещения блоков в HTML, это поможет при работе со сложными элементами навигации и улучшит читаемость CSS.

Чистая структура HTML

Простая и ясная структура HTML облегчает стилизацию, улучшает доступность и повышает SEO. Избегайте излишне сложных конструкций с вложенными div'ами.

Практика на интерактивных демонстрациях

Пользуясь платформами, такими как jsfiddle и другими ресурсами с демонстрационными материалами, вы сможете набираться опыта на практике. Экспериментируйте, делайте ошибки и исправляйте их.

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

1. Полное руководство по Flexbox от CSS-Tricks
2. Расшифровка flex-grow, flex-shrink и flex-basis от CSS-Tricks
3. Flexbox: полное руководство по CSS Flex с анимированными диаграммами от FreeCodeCamp
4. Flexbox.io — видеокурс, который сделает вас профессионалом CSS Flexbox
5. Flexbox: насколько эластична эта гибкая коробка? от Smashing Magazine