html - 我如何强制 float DIV 匹配另一个 float 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>

---

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

这个方法之所以有效，是因为它本质上是对你的问题的简化，在这个有点“oldskool”的方法中，我把两列放在后面跟着一个空的清除元素，清除元素的工作是告诉父级(有背景)这是 float 行为结束的地方，这允许父级在 clear 位置基本上渲染 0 像素的高度，这将是之前最高的 float 元素。

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

应该注意的是，这种技术是“oldskool”，因为更好的选择是用类似 clearfix 的东西来触发这种高度计算行为。或者简单地让 overflow: hidden 在父元素上。

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

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

您需要在父对象上 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 上看到此技术的示例(请参阅页面底部的四个水平聚光灯图像)。