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

Question

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

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

score 26 · Accepted Answer

看起来您将不得不实现 Javascript 方法。我会采取的方法是抓住高度，.legs然后将其应用于.flight_noand .price。

我能想到的唯一其他选择是通过提供.flight一个背景图像来“伪造它”，但是你的左列和右列在风格上是不同的，然后repeat-y在你的 CSS 中。如果你这样做，侧边栏实际上不必跨越相同的高度。

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

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

编辑：

时代变了——jQuery 不再是曾经的主宰，我们欢迎 Flexbox 走向世界。有关基于列的解决方案，请参阅此 SO 页面：

score 1 · Accepted Answer

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

由于没有固定的高度，我使用height: 100%并链接到 body 一个 html。

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

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

2 回答 2