Как установить высоту элемента для соответствия высоте другого элемента?

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

Что-то примечание заключается в том, что я не могу установить точную высоту для родительского div, а затем установить левый и правый столбцы на "height: 100%". Это связано с тем, что в центральном столбце может быть только небольшое количество контента.

Ответы

Ответ 1

Похоже, вам придется внедрить Javascript-подход. То, как я это сделаю, - это захватить высоту .legs, затем применить ее к .flight_no и .price.

Единственный другой вариант, о котором я могу думать, - это "подделка", предоставив .flight фоновое изображение, которое будет включать, но ваши левые и правые столбцы стилистически отличаются, а затем repeat-y в вашем CSS. Если вы это сделаете, боковые панели на самом деле не должны будут иметь одинаковую высоту.

Что-то вроде этого, используя jQuery, будет динамически устанавливать ваши боковые панели на высоту среднего столбца.

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});

Ответ 2

Расширение div до правильной высоты или разрешение 100% высоты контейнера. Вы должны привязать height:100% к контейнеру с фиксированной высотой или к телу с помощью другого height: 100%;. В долгосрочной перспективе вам, вероятно, потребуется это решение.

Поскольку нет фиксированной высоты, я использовал height: 100% и привязал к телу html.

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

Демо

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