Создание двух div блоков одной высоты с CSS без таблиц

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

Для достижения одинаковой высоты блоков div, воспользуйтесь Flexbox. Установите для родительского элемента свойство display: flex; и для дочерних элементов flex: 1;:

<div style="display: flex;">
  <div style="flex: 1; background: lightblue;">Содержимое 1</div>
  <div style="flex: 1; background: lightgreen;">Содержимое 2</div>
</div>

Учтите, что flex – это ключ к созданию колонок одинаковой высоты!

Подробно о Flexbox

Освоение Flexbox расширит ваши горизонты в веб-разработке и поможет легко решать сложные задачи макетирования.

Управление с помощью Flex-Grow и Flex-Basis

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

.flex-container {
  display: flex;
}

.flex-child {
  flex-grow: 1;
  flex-basis: 0;
}

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

Совместимость с браузерами

Проверьте работу вашего решения в различных браузерах. Используйте Автопрефиксер для добавления необходимых префиксов.

Динамическое решение на JavaScript

Для более сложных макетов или когда требуется корректировка разметки в реальном времени, применяйте JavaScript или jQuery:

const tallestHeight = Math.max(...Array.from(document.querySelectorAll('.column')).map(div => div.offsetHeight));
document.querySelectorAll('.column').forEach(div => div.style.height = `${tallestHeight}px`);

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

Представьте два небоскрёба – это блоки div – которые вы хотите привести к одинаковой высоте без добавления новых "этажей":

🏢 A: 📦📦📦
🏢 B: 📦📦

После применения display: flex и align-items: stretch, высоты обоих блоков DIV станут идеально равными!

Альтернативные методы и потенциальные сложности

Если из каких-то причин Flexbox не подходит, например, из-за поддержки старых браузеров, существуют и другие подходы:

Использование Display: Table-Cell

Стиль display: table-cell – это классический метод, хоть он и не идеально подходит для адаптивных макетов, но позволяет добиться равенства высот блоков:

<div style="display: table-row;">
  <div style="display: table-cell; background: lightblue;">Блок 1</div>
  <div style="display: table-cell; background: lightgreen;">Блок 2</div>
</div>

Трюк с отступами и маржинами

Можно также использовать подход с большими нижними отступами и отрицательными маржинами:

.container { overflow: hidden; }
.column { float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px; }

Валидность и чистота кода

Обеспечьте валидность вашего HTML и CSS, это упростит поддержку и улучшит кроссбраузерность.

Продвинутые техники и современные подходы

Освоение адаптивного дизайна с использованием Flexbox и медиа-запросов позволит разрабатывать макеты, которые идеально смотрятся на любых устройствах:

@media (max-width: 768px) {
  .flex-container {
    flex-wrap: wrap;
  }
  .flex-child {
    flex-basis: 100%;
  }
}

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

1. Полное руководство по Flexbox | CSS-Tricks
2. Основы flexbox – CSS | MDN
3. Как сделать два div блока одинаковой высоты? | Stack Overflow
4. Полное руководство по CSS Grid | CSS-Tricks
5. CSS Flexbox | w3schools
6. Создание пропорциональных отношений для видео – A List Apart
7. Лучшие практики сеток на Flexbox | philipwalton.github.io

Завершение

Используйте полученные знания о различных методах для создания идеальных макетов. Делитесь своими успехами и ищите новые решения – тогда успех в программировании будет вам гарантирован!