我的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，因为它的高度取决于当前显示在其中的数据量而变化。如何确保两列的高度始终相等？
最佳答案
将其包裹在包含背景色的包含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元素的工作是告诉父级(有背景)这是哪里 float 行为结束后，这将允许父对象在透明位置实际渲染高度为0的像素，这将是先前最高 float 元素的大小。
原因是要确保父元素与最高的列一样高，然后在父元素上设置背景，以使两列具有相同的高度。
应当指出，此技术是“oldskool”，因为更好的选择是使用clearfix之类的东西或通过简单地在父元素上 overflow hidden 来触发该高度计算行为。
尽管这在有限的情况下可行，但是如果您希望每个列在外观上看起来都不同，或者它们之间有间隙，那么在父元素上设置背景将不起作用，但是有一种技巧可以达到这种效果。
诀窍是在所有列中添加底部填充，以达到您期望的最大大小，这可能是最短列和最高列之间的差。如果无法解决此问题，则选择一个大数字，然后需要添加相同数字的负底边距。
您将需要隐藏在父对象上的溢出，但结果将是每一列都将请求渲染由边距建议的此额外高度，但实际上并不需要该大小的布局(因为负边距会抵消计算)。
这将以最高的列的大小渲染父对象，同时允许所有列以其高度+使用的底部填充的大小渲染，如果此高度大于父对象，则其余部分将被剪掉。
<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 wilkins website上看到此技术的示例(请参见页面底部的四个水平聚光灯图像)。