Html CSS浮动Div高度问题，没有简单的解决方案？

我有一个CSS问题我无法解决

我已经做好了准备

假设粉色和绿色框的高度由它们的内容决定。粉红色的盒子有时可能是较小的

我想做的是让较小的框将其高度固定到外部包含div的位置，这样它的高度就会与粉色框的高度相同（反之亦然）

有人有什么解决办法吗

粉红色和绿色框的最小高度不起作用，因为它们可能超过该高度（也不支持IE6）

粉红色和绿色框上的100%高度无效，因为外部div没有固定高度

一张桌子可以用，但是拜托，一张桌子

我可以通过把背景和左右边框放在外层div的背景中，在粉色和绿色框上伪造背景和左右边框。但这看起来很混乱

目前我有一个js解决方案，但必须有一个更简单的解决方案

---

干杯。

除了Javascript/Jquery或表之外，我唯一能想到的就是基于

显示：表单元格的解决方案（解释）-但这在IE中也不起作用，直接使用表也没有什么区别，是吗

我要说的是，由于糟糕的CSS规范和/或实现，这是极少数无法绕过表格的情况之一

编辑：正如其他回答者所指出的那样，CSS解决方案（“人造列”）在大多数情况下都有效。使用“CSS表格”（使用
display:table
properties）我认为还不是有效的解决方案，因为IE6不支持这些解决方案，IE6是一款仍占有相当大市场份额的浏览器
 使用它。基本上，您必须在包含两个框的父元素上使用重复的背景图像。
这与相同高度的列问题相同，请参阅此以获得解决方案。
这是什么：

.green {
  display:block;
  float: left;
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
}

.outer {
  position: relative;
  background: yellow;
  overflow: auto;
}

.pink {
  left: 250px;
  background: red;
  height: 100%;
  width: 100px;
  position: absolute;
}

他应该在工作。。也许是我改变了颜色，粉红色的盒子是长着的

编辑啊好的，我错过了第二个框上的浮动。如前所述，如果这是一种必备品，那么我认为人造柱是一种很好的技术。
折衷一下怎么样

如果faux列不能帮助您，您不想使用表，并且您已经有了一个javascript解决方案，那么我只需要使用css（display:table，display:table cell）并将javascript放入IE6和IE7的条件注释中

然后，你可以在适当的时候轻松地取出javascript，同时，现代浏览器将不必执行它。
不，你已经列出了最流行的技术（人造列，javascript）。显然，没有办法用css中的div作为答案。我将使用我自己的js/jquery解决方案，使用css作为备份，但不提供100%想要的外观。我会把它贴上去，当它完成，并有一些沉重的使用。+1的答案。人造列是有效的解决方案，如果保存为8位PNG，文件通常约为1或2K…甚至更少。在我使用这种技术的大多数情况下，我能够使用高度为1px的重复背景图像。根据具体情况，文件大小可能只有几百字节。OHMYWORDTABLES:）事实上，我仍然认为伪列是正确的答案。表实际上不是一种布局机制。对于人造列，您始终可以关闭背景图像并更改CSS中的布局。对于表格，您需要编辑表格以更改布局。只有我的两分钱。@Doug是真的，但并不总是有效（当你需要柱子具有相同的物理高度时，例如在柱子内放置东西时）。如果人造列适合您的情况，那么它是一个不错的解决方案（如果它们是OP问题的解决方案，我非常满意），但是，这仍然是CSS的一个巨大缺点，我觉得很可怕，它没有以某种形式得到解决。@kemp HTML表描述了语义。如果这些语义不存在，那就是谎言。说谎是不好的。无论是人造列还是CSS表都不是“可怕的黑客行为”。考虑到使用各种CSS方法进行的良好标记，给屏幕阅读器用户的印象（例如）是相当稳定的。开始使用HTML表格时，情况并非如此。有趣的是，我从未读过任何关于屏幕阅读器不理解表格的具体内容。你有任何链接吗？好吧，阅读文章标题中的“没有黑客”是相当可疑的。