В настоящее время у меня есть два столбца с другим столбцом между ними. Я хочу, чтобы левый и правый столбцы расширялись по высоте, поскольку в центральном столбце добавлено больше контента.
Что-то примечание заключается в том, что я не могу установить точную высоту для родительского div, а затем установить левый и правый столбцы на "height: 100%". Это связано с тем, что в центральном столбце может быть только небольшое количество контента.
Похоже, вам придется внедрить Javascript-подход. То, как я это сделаю, - это захватить высоту .legs, затем применить ее к .flight_no и .price.
Единственный другой вариант, о котором я могу думать, - это "подделка", предоставив .flight фоновое изображение, которое будет включать, но ваши левые и правые столбцы стилистически отличаются, а затем repeat-y в вашем CSS. Если вы это сделаете, боковые панели на самом деле не должны будут иметь одинаковую высоту.
Что-то вроде этого, используя jQuery, будет динамически устанавливать ваши боковые панели на высоту среднего столбца.
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Расширение div до правильной высоты или разрешение 100% высоты контейнера. Вы должны привязать height:100% к контейнеру с фиксированной высотой или к телу с помощью другого height: 100%;. В долгосрочной перспективе вам, вероятно, потребуется это решение.
Поскольку нет фиксированной высоты, я использовал height: 100% и привязал к телу html.
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
Чтобы указать точную высоту контейнера для боковых панелей, вам либо нужно использовать фиксированную высоту, либо использовать javascript.