如何强制一个浮动DIV匹配另一个浮动DIV的高度？

Question

我的HTML代码只是将页面分为两列，分别为65％，35％。

<div style="float : left; width :65%; height:auto;background-color:#FDD017;">
   <div id="response">
   </div> 
</div>
<div style="float : left; width :35%;height:auto; background-color:#FDD017;">
   <div id="note">
   </div>
</div>

在中response div，我有可变数据；在中note
div，我有固定数据。即使两个div具有两个不同的数据集，我也需要它们以相同的高度显示，以便背景色看起来好像填充了包含两者的框。当然，问题出在response
div，因为其高度取决于当前显示在其中的数据量。

如何确保两列的高度始终相等？

Answer 1

将其包裹在包含背景色的包含div中，并在“列”之后添加一个清除div。

<div style="background-color: yellow;">
  <div style="float: left;width: 65%;">column a</div>
  <div style="float: right;width: 35%;">column b</div>
  <div style="clear: both;"></div>
</div>

更新以解决一些评论和我自己的想法：

该方法之所以有效，是因为它本质上是简化了您的问题，在这种有点“过时”的方法中，我将两列放在其后，然后是一个空的clearing元素，clearing元素的工作是告诉父级（有背景）这是哪里浮动行为结束后，这将允许父对象在透明位置实际渲染高度为0的像素，这将是先前最高浮动元素的大小。

原因是要确保父元素与最高的列一样高，然后在父元素上设置背景以使两列具有相同的高度。

应该注意的是，这种技术是“老套的”，因为更好的选择是使用诸如clearfix之类的东西或通过简单地在父元素上隐藏溢出来触发高度计算行为。

尽管这在有限的情况下可行，但是如果您希望每个列在外观上看起来有所不同，或者在它们之间留有空隙，那么在父元素上设置背景将不起作用，但是有一种技巧可以达到这种效果。

诀窍是在所有列中添加底部填充，以达到您期望的最大大小，这可能是最短列和最高列之间的差异，如果您无法解决此问题，则选择一个大数字，然后需要添加底数为负的相同数字。

您将需要隐藏在父对象上的溢出，但结果将是每一列都将请求呈现由边距建议的此额外高度，但实际上并不需要该大小的布局（因为负边距会抵消计算）。

这将以最高的列的大小渲染父对象，同时允许所有列以其高度+所用底部填充的大小渲染，如果此高度大于父对象，则其余部分将被剪掉。

<div style="overflow: hidden;">
  <div style="background: blue;float: left;width: 65%;padding-bottom: 500px;margin-bottom: -500px;">column a<br />column a</div>
  <div style="background: red;float: right;width: 35%;padding-bottom: 500px;margin-bottom: -500px;">column b</div>
</div>

您可以在bowers and wilkinshtml" target="_blank">网站上看到此技术的示例（请参阅页面底部的四个水平聚光灯图像）。