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

Question

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

我画了一个小图。

假设粉色和绿色框的高度由它们的内容确定。粉色框有时可能会更小。

我想做的是让较小的框将其高度固定为外部包含div的高度，以便它与粉色框（或反之亦然）具有相同的高度。

粉色和绿色框上的min-height不起作用，因为它们可能超过该高度（也没有IE6支持）。

粉色和绿色框上的100% height不起作用，因为外部div没有固定的高度。

表格可以工作，但是，来吧，一个表格？

我可以通过将它们放在外部div的背景中来伪造粉色和绿色框的背景和左右边框。但那看起来很凌乱。

目前我有一个js解决方案，但肯定有更简单的方法。

干杯。

- CafeHey

---

不，你列出了这个问题最流行的技术（伪列、JavaScript）。http://www.alistapart.com/articles/fauxcolumns/目前还没有使用CSS中的div实现这个的方法。 - davidosomething

谢谢你的回答。我将采用自己的js / jquery解决方案，备用css无法提供100％所需的外观。完成并经过大量使用后，我会发布它。 - CafeHey

Answer 1

除了Javascript/Jquery或表格之外，我唯一能想到的是基于display: table-cell的解决方案（在此处有解释：这里）- 但这在IE中也行不通，和直接使用表格没有太大区别，对吧？

我认为这是罕见的情况之一，由于糟糕的CSS规范和/或实现，没有绕过表格的方法。

编辑：正如其他回答者指出的那样，有CSS解决方法（“假列”），可以在大多数情况下使用。我认为使用“CSS表格”（使用display: table属性）还不是有效的解决方案，因为它们不受IE6支持，而该浏览器仍然具有相当大的市场份额。

- Pekka

---

OHMYWORDTABLES :) 其实，我仍然认为Faux Columns是正确的答案。表格*真的不是一种布局机制。使用Faux Columns，您可以随时关闭背景图像并在CSS中更改布局。对于表格，您需要编辑表格才能更改布局。这只是我的个人看法。 - Doug Neiner

@kemp HTML表格描述语义。如果这些语义实际上并不存在，那么它们就是谎言。撒谎是不好的。Faux Columns和CSS表格都不是“可怕的黑客”。 - Quentin

如果使用各种CSS方法进行良好的标记，则对于屏幕阅读器用户（例如），给出的印象是相当恒定的。但如果开始使用HTML表格，则情况就不同了。 - Quentin

很有趣，我从未读过任何关于屏幕阅读器不理解表格的具体内容。你有链接吗？ - Matteo Riva

@Doug，嗯，我对被纠正没有固执的观点，只要修正是与我对清晰代码的核心信念一致的。当有更简单的解决方案可用时，我倾向于阻止复杂的方法。有时候，一些表格行（即在表格上的行）确实无法避免。毕竟，我们都在寻求能让我们养活自己的简单解决方案。好了，别再开糟糕的双关语笑话了 :) - Pekka

Answer 2

使用“虚拟列技术”来实现。基本上，您需要在包含两个框的父元素上使用重复的背景图像。 了解更多关于虚拟列技术的信息。

- Mathias Bynens

---

对于这个答案点赞。伪列解决方案是有效的，如果保存为8位PNG格式，文件大小通常为1或2K。 - Doug Neiner

在大多数我使用这种技术的情况下，我能够使用高度为1像素的重复背景图像。根据情况不同，文件大小可能只有几百字节。 - Mathias Bynens

Answer 3

这与等高列问题相同，参见此博客文章以获取解决方案。

- Lazarus

---

读这篇标题为“无黑客攻击”的文章，实际上还是有些值得质疑的。 - Matteo Riva

Answer 4

这个怎么样：

.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;
}

应该可以工作...也许我改变了颜色，粉色的框是会增长的！;)

编辑啊，好的，我错过了第二个框的浮动。如果这是必须的话，如上所述，伪列技术是一个不错的技术。

- xijo

Answer 5

怎么样妥协一下呢？

如果伪列不能帮助你，你不想使用表格并且已经有了JavaScript解决方案，我建议你直接使用CSS（display:table, display:table-cell），并将JavaScript放在IE6和IE7的条件注释中。

这样，当时机成熟时，你可以轻松地去掉JavaScript，同时现代浏览器也不必执行它。

- jeroen