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

我的 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> 

In the response div，我有可变数据；在里面note div，我有固定数据。 尽管两人div有两组不同的数据，我需要它们以相同的高度显示，以便背景颜色看起来填充包含这两组数据的框。自然，问题就在于response div，因为它的高度根据当前显示的数据量而变化。

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

将它们包裹在一个包含的 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>

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

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

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

应该注意的是，这种技术是“oldskool”，因为更好的选择是用类似的东西触发这种高度计算行为clearfix http://www.webtoolkit.info/css-clearfix.html或者简单地将溢出：隐藏在父元素上。

虽然这在有限的场景中有效，但如果您希望每列在视觉上看起来不同，或者它们之间有间隙，那么在父元素上设置背景将不起作用，但是有一个技巧可以实现这种效果。

诀窍是向所有列添加底部填充，达到您期望的最大尺寸，这可能是最短列和最高列之间的差异，如果您无法解决这个问题，那么选择一个大数字，然后需要添加相同数量的负底部边距。

您需要在父对象上隐藏溢出，但结果将是每列将请求渲染边距建议的额外高度，但实际上并不请求该大小的布局（因为负边距与计算相反）。

这将以最高列的大小渲染父级，同时允许所有列以其高度+所使用的底部填充的大小渲染，如果该高度大于父级，则其余列将被简单地剪掉。

<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>

您可以在以下位置查看此技术的示例：鲍尔斯和威尔金斯网站 http://www.bowers-wilkins.com/Speakers/Home_Audio/Nautilus/Overview.html（请参阅页面底部的四个水平聚光灯图像）。