Html 如何设置元素的高度以匹配另一个元素的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10458465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set height of element to match height of another element?
提问by Jordan
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.
我目前有两列，中间有另一列。我想要的是让左右列在高度上延伸，因为中心列添加了更多内容。
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.
需要注意的是，我无法为父 div 设置确切的高度，然后将左右列设置为“高度：100%”。这是因为中心栏中可能只有少量内容，也可能很多。
回答by Chords
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 .legsthen apply it to .flight_noand .price.
看起来您将不得不实施 Javascript 方法。我将采取的方法是抓住高度.legs然后将其应用于.flight_no和.price。
The only other option I can think of would be to "fake it" by giving .flighta background image that would include however your left and right columns are stylistically different, then repeat-yin your CSS. If you do that, the sidebars wouldn't actually have to span the same height.
我能想到的唯一其他选择是通过提供.flight一个背景图像来“伪造”它，该背景图像将包括您的左列和右列在风格上不同，然后repeat-y在您的 CSS 中。如果你这样做，侧边栏实际上不必跨越相同的高度。
Something like this, using jQuery, will dynamically set your sidebars to the height of the middle column.
像这样的东西，使用 jQuery，会动态地将你的侧边栏设置为中间列的高度。
$(document).ready(function() {
$(".flight_no, .price").css("height", $(".legs").height());
});
Edit:
编辑：
Times have changed -- jQuery is not the juggernaut it once was, and we welcomed Flexbox to the world. See this SO page for column-based solutions:
时代变了——jQuery 不再是它曾经的主宰，我们欢迎 Flexbox 走向世界。有关基于列的解决方案，请参阅此 SO 页面：
回答by Starx
Extending div to correct height, or lets say 100% height of the container, You have to chain height:100%up to the container with fixed height or to the body with another height: 100%;. On the long run, you will probably require this solution.
将 div 扩展到正确的高度，或者说容器的 100% 高度，您必须链接height:100%到具有固定高度的容器或带有另一个height: 100%;. 从长远来看，您可能需要此解决方案。
Since there is no fixed height, I used height: 100%and chained up to the body an html.
由于没有固定的高度，我使用height: 100%并链接到正文一个 html。
body, html { height: 100%; }
.flight
{
float: right;
border: 1px solid green;
height: 100%;
}
TO give exact height of container to the sidebars, you either have to use fixed height or use javascript.
要为侧边栏提供准确的容器高度，您必须使用固定高度或使用 javascript。
