如何自动增加div的高度，因为另一个div的高度增加？

Question

这就是我想要的......

<div style="width:1000px;">

  <div style="float:left; width:300px; height:auto;">    </div>
  <div style="float:right; width:700px; height:auto;">    </div>

</div>

我想要的是，如果第二个DIV的高度增加，第三个DIV的高度也会自动增加......

简而言之， （第二个DIV高度=第三个DIV高度）

Answer 1

使用this插件并编写一个函数，这样当一个div的属性（在我们的例子中是Height）发生变化时，你的函数会更新另一个属性的高度！

Answer 2

有几种不同的方法可以解决这个问题。见这里：http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

您可以使用 JavaScript 获取元素高度，然后使用此值设置其他元素高度，如您在此处使用 jQuery ：

var height = $(".div1").height();

并且，如果您的第一个div高度随着窗口调整大小或类似情况而变化，您可以使用EventListener调用将在第一个中修改.div2的函数div的高度：

window.addEventListener('resize', function(event){
    $(".div2").css({"height":height});
});

您甚至可以将CSS transition应用于height属性以设置高度变化的动画。

JSFiddle Demo

Answer 4

谢谢大家！ 最简单的解决方案是使用TABLE而不是DIV（无论问题出现在哪里）......