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

Posted 2023-03-06

【中文标题】如何设置元素的高度以匹配另一个元素的高度？

【英文标题】：How to set height of element to match height of another element?

【发布时间】：2012-05-14 13:36:19

【问题描述】：

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

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

【参考方案1】：

看起来您将不得不实现一种 javascript 方法。我的做法是获取.legs 的高度，然后将其应用于.flight_no 和.price。

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

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

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

---

编辑：

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

CSS - Equal Height Columns?

【讨论】：

感谢您的回复。你能给我任何指示吗？我以前从未编写过 JavaScript 来做这样的事情（而且我在 JavaScript 方面的经验相当有限）。

你最好的选择是使用像 jQuery 这样的库，因为 vanilla JS 可能有点压倒性。使用 jQuery，你会想要这样的东西：$(".flight_no, .price").css("height", $(".legs").height());

这是一个 jsfiddle，因此您可以看到它的实际效果：jsfiddle.net/Jyu94 尝试从 Javascript 窗格中删除代码，您将看到您最初发布的内容。

只用 CSS 也就是不用 JavaScript 也能达到同样的效果吗？

@hamid 我认为你必须依靠一些 JS，这是一个例子：jsfiddle.net/h3rpwju5/1

【参考方案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。

【讨论】：

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