HTML、CSS、jQuery - 一列中 div 的高度取决于另一列中 div 的高度答案

【问题标题】：HTML, CSS, jQuery - Height of divs in one column depending on the height of divs in another columnHTML、CSS、jQuery - 一列中 div 的高度取决于另一列中 div 的高度
【发布时间】：2011-12-23 20:11:41
【问题描述】：

我遇到了以下问题。考虑这个 html 代码示例：

<html>
<body>
<div id="leftColumn">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
</div>
<div id="rightColumn">
  <div id="div1sidebar"></div>
  <div id="div2sidebar"></div>
  <div id="div3sidebar"></div>
  <div id="div4sidebar"></div>
</div>     
</body>
</html>

现在 - 左列中 div 的高度会有所不同，具体取决于其中的内容。我希望右列中的 div 与左列中的 div 高度相同 - 所以“div1sidebar”的高度取决于“div1”，“div2sidebar”取决于“div2”等。

有没有办法只用 css 来实现它？或者例如使用 jQuery？ “Faux columns”方法（http://www.alistapart.com/articles/fauxcolumns/）不是一个选项，因为它不是关于父母的背景，而是关于 div 本身的高度。

编辑：还有一件事 - 左栏中 div 的高度“即时”更改，无需重新加载网站。

【问题讨论】：

标签： jquery html css height equals

【解决方案1】：

您可以左右 float 元素并使用重复的 clear: both 使它们对齐，如下所示：http://jsfiddle.net/eNRhQ/2/

这确保了相应的 div 始终对齐，但正如您从边框看到的那样，它们的高度实际上并不相同。（你可能只需要这个来进行样式设置......）

如果你真的想以编程方式对齐你的 div，你可以在 jQuery 中这样做：

var left = $('#left-element');
var right = $('#right-element');

var maxHeight = Math.max(left.height(), right.height());

left.height(maxHeight);
right.height(maxHeight);

但我会确保页面在没有任何 Javascript 的情况下也可以正常显示

【讨论】：

嗯，感谢您的帮助，但在那个 jsfiddle 示例中，html 有点不同 - 我不能这样更改；在我的情况下，所有左 div 必须在一个左列中，所有右 div 必须在右列中。但无论如何，我用：$("#div1sidebar").css({height: $("#div1").height() }); 做到了。虽然，动态调整大小仍然存在问题。为什么这段代码不起作用？ - $("#div1").resize(function() { $("#div1sidebar").css({height: $("#div1").height() }); });

【解决方案2】：

这是在 CSS 中无法完成的奇怪事情之一。

我用这个插件，效果很好，http://www.cssnewbie.com/equalheights-jquery-plugin/

如果您希望在调整大小后保持最新，您可以这样做：

$(".columns").resize(function(){
  $(".columns").equalHeights();
});

http://api.jquery.com/resize/

【讨论】：

看起来很有希望。请告诉我 - 有没有办法使用它来动态调整一个 div 的大小？
恐怕它不起作用。调整 div 的大小并不会改变它们的高度。