Вопрос по css, html – Как установить высоту элемента в соответствии с высотой другого элемента?

14

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

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

Ваш Ответ

2   ответа
18

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

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

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

$(document).ready(function() {
  $(".flight_no, .price").css("height", $(".legs").height());
});
Лучше всего будет использовать такую библиотеку, как jQuery, поскольку ванильный JS может быть немного подавляющим. С jQuery вы бы хотели что-то вроде этого:$(".flight_no, .price").css("height", $(".legs").height());
Можно ли достичь такого же результата только с помощью CSS, то есть без JavaScript?
Спасибо за ответ. Можете ли вы дать мне какие-либо указатели на это? Я никогда не писал JavaScript, чтобы делать что-то подобное раньше (и у меня довольно ограниченный опыт работы с JavaScript). Jordan
Вот jsfiddle, чтобы вы могли увидеть его в действии:jsfiddle.net/Jyu94 Попробуйте удалить код из панели Javascript, и вы увидите, что вы изначально опубликовали.
1

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

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

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

демонстрация

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

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

Похожие вопросы