如何设置元素的高度以匹配另一个元素的高度？

Question

我目前有两列，其中有另一列。我想要的是让左右列在高度上延伸，因为中间列添加了更多内容。

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

Answer 1

看起来您将不得不实施Javascript方法。我想要的方法是抓住.legs的高度，然后将其应用到.flight_no和.price。

我能想到的唯一另一个选择就是通过给.flight一个背景图片来“假装”，但是你的左右列在风格上有所不同，然后你的CSS中有repeat-y 。如果你这样做，侧边栏实际上不必跨越相同的高度。

使用jQuery这样的东西会动态地将你的侧边栏设置为中间列的高度。

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

Answer 2

将div扩展到正确的高度，或者说容器的高度为100％，您必须将height:100%链接到具有固定高度的容器或使用另一个height: 100%;链接到正文。从长远来看，您可能需要这个解决方案。

由于没有固定的高度，我使用height: 100%并将身体链接到html。

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

Demo

要将容器的精确高度提供给侧边栏，您必须使用固定高度或使用javascript。