如何设置元素的高度以匹配另一个元素的高度？ [英] How to set height of element to match height of another element?

问题描述

我目前有两列，在它们之间有另一列。我想要的是让左右列的高度随着中心列添加更多内容而扩展。

I currently have two columns, with another column in-between them. What I want is to have the left and right columns extend in height as the centre column has more content added to it.

需要注意的是，我无法设置精确height为父div，然后将左右列设置为height：100％。这是因为在中心列中可能只有少量内容，或者很多。

Something to note is that I cannot set an exact height for the parent div and then have the left and right columns set to "height: 100%". This is because there could be only a small amount of content in the centre column, or a lot.

编辑：我已经通过使用表来解决了这个问题。感谢回复。

I've solved this problem by just using tables. Thanks for the replies.

推荐答案

Jordan - 欢迎使用Stack Overflow！

Jordan - welcome to Stack Overflow!

看起来你必须实现一个Javascript方法。我的方法是抓住 .legs 的高度，然后将其应用到 .flight_no 和 .price 。

It looks like you're going to have to implement a Javascript approach. The way I would go about it would be to grab the height of .legs then apply it to .flight_no and .price.

我可以想到的唯一的另一个选择是伪造 $ c> .flight 一个背景图片，但是你的左右列在风格上不同，然后在你的CSS中 repeat-y

The only other option I can think of would be to "fake it" by giving .flight a background image that would include however your left and right columns are stylistically different, then repeat-y in your CSS. If you do that, the sidebars wouldn't actually have to span the same height.

EDIT strong>

像这样，使用jQuery，会动态设置侧边栏到中间列的高度。

Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.

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

这篇关于如何设置元素的高度以匹配另一个元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！