Поместить рядом стоящие блоки DIV в общий контейнер и позаботиться об их одинаковой высоте — это одна из наиболее распространённых задач в веб-разработке. Существует множество способов, как это можно сделать, используя лишь CSS. В этой статье речь пойдёт о самом простом. Он подойдёт для тех, кто не зацикливается на старых версиях браузеров.

Заключается способ в использовании свойства flex. Поддержку разными браузерами можно посмотреть, например, здесь. С 2014 года все браузеры полноценно поддерживают это свойство, включая IE11.

Код файла HTML:

<html>
<head>
 <meta charset="utf-8">
 <title>Тест</title>
 <link href="style.css" rel="stylesheet">
</head>
<body>
 <div class="container-site">
 <div class="container-sidebar">
 <h1>Sidebar</h1>
 <p>Весеннее равноденствие существенно дает первоначальный сарос. Вселенная достаточно огромна, чтобы приливное трение вращает непреложный большой круг небесной сферы, но кольца видны только при 40–50. Реликтовый ледник, это удалось установить по характеру спектра, вращает непреложный дип-скай объект. Млечный Путь однородно решает эксцентриситет. Зоркость наблюдателя, оценивая блеск освещенного металического шарика, иллюстрирует метеорит.</p>
 </div>
 <div class="container-content">
 <h1>Content</h1>
 <p>Прямое восхождение точно перечеркивает радиант, хотя это явно видно на фотогpафической пластинке, полученной с помощью 1.2-метpового телескопа. Уравнение времени, по определению, пространственно ищет Южный Треугольник, но это не может быть причиной наблюдаемого эффекта. Движение выбирает терминатор. Комета Хейла-Боппа доступна.</p>
 <p>Гелиоцентрическое расстояние перечеркивает астероидный натуральный логарифм. Хотя хpонологи не увеpены, им кажется, что параллакс теоретически возможен. Широта доступна. Эклиптика доступна.</p>
 <p>Маятник Фуко ищет случайный поперечник. Различное расположение, в первом приближении, пространственно иллюстрирует межпланетный Ганимед. Комета притягивает экваториальный перигелий, тем не менее, уже 4,5 млрд лет расстояние нашей планеты от Солнца практически не меняется. Эпоха выслеживает первоначальный метеорит.</p>
 </div>
 </div>
</body>
</html>

Содержимое файла стилей style.css:

body {
 background-color: #fff;
}

.container-site {
 background-color: #ffc0cb;
 display: flex; /* преобразуем блок во flex-контейнер */
}

.container-sidebar {
 background-color: #00ffff;
 width: 300px; /* фиксируем ширину */
 flex-shrink: 0; /* не даём блоку сужаться */
}

.container-content {
 background-color: #fffdd0;
 flex-grow: 1; /* занимать всё пространство, не затрагивая сайдбар */
}

Пояснения:

  • Свойство flex-shrink применимо к дочернему элементу flex-контейнера. Определяет возможность сжиматься при необходимости. Значения: 0 — нет, 1 — да.
  • Свойство flex-grow применимо к дочернему элементу flex-контейнера. Здесь цифрой задаётся пропорция свободного места внутри контейнера, которое элемент может занять. В примере лишь один элемент с этим свойством и значение 1 даёт ему право занимать всё место. Если бы элементов с этим свойством было два, у одного из них значение 1, у другого 2, то второй занял бы в два раза больше места по сравнению с первым.
  • Тексты в примере сгенерированы Яндекс-рефератами.