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

我目前有两列，另一列在它们之间。我想要的是让左列和右列的高度随着中间列添加更多内容而延伸。如何设置元素的高度以匹配另一个元素的高度？

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

2012-05-05 Jordan

它看起来像你将不得不实施一个Javascript方法。我会去的方法是抓住.legs的高度，然后将其应用于.flight_no和.price。

我能想到的唯一的其他选择是“假的”给予.flight背景图像将包括但你的左，右列是曲风不同，那么repeat-y在你的CSS。如果你这样做，侧边栏实际上不必跨越相同的高度。

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

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

2012-05-05 03:20:15 Chords

感谢您的回复。你能给我任何指针吗？我从来没有写过JavaScript来做这样的事情（我对JavaScript的使用经验非常有限）。 – Jordan

你最好的选择是使用像jQuery这样的库，因为vanilla JS可能有点压倒性。有了jQuery，你会想要这样的：'$（“。flight_no，.price”）.css（“height”，$（“。legs”）。height（））;' – Chords

这里有一个jsfiddle，所以你可以看到它的行动：http://jsfiddle.net/Jyu94/尝试从Javascript窗格中删除代码，你会看到你最初发布的内容。 – Chords

扩展格到合适的高度，或者可以说，容器的100％的高度，你必须链height:100%达到与固定高度的容器或身体与另一个height: 100%;。从长远来看，你可能会需要这个解决方案。

由于没有固定的高度，我用height: 100%和链接到一个html的身体。

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

给集装箱的确切高度的侧边栏，你要么必须使用固定的高度或使用JavaScript。

2012-05-05 03:39:33 Starx

在您的演示中，如果缩小视图高度（生成垂直滚动条），则外部列会显示为比中间列短。 – Jake

回答