CSS：如何使两个DIV并排且高度自适应并与容器的高度相同？

Question

我正在为客户设计一个网站，尝试让两个并排的DIV占满其容器的100%。我已经实现了并排显示，但是右侧的DIV无法与左侧的DIV高度相同。

您可以在此处查看问题：http://www.campusmomlaundry.com/ “挑战”和“好处”DIV应该并排且高度相同，而不需要手动指定高度。我该如何做到这一点？

- Jake Petroules

---

欢迎来到 CSS 盒模型和布局的混乱世界... :-) - Franci Penov

-1为发布链接到已不存在的现场网站。 - kontur

真的吗？因为一个已经发布了将近两年的死链接而被扣掉1分？ - Jake Petroules

-1 表示添加一个链接，你知道它过一段时间后就不存在了。是的，差不多三年后。 - user1544337

Answer 1

如果是我，我会通过JavaScript来解决这个问题。使用 jquery ，你可以做到...

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
    $('#rightColumn').height($('#leftColumn').height());
}
else
{
    $('#leftColumn').height($('#rightColumn').height());
}
});

那就这样吧。如果你像我一起工作的人一样，不喜欢用Javascript解决CSS问题。那么你可能就没什么办法了。很多时候，使用JQuery比使用CSS的“正确方式”更快。你可能会花一整天的时间尝试使用不同的样式组合来让它正常工作。

- MindingData

---

我确实尝试过$(document).ready，但它触发得太快了，请将您的代码更改为$(window).load。 - Jake Petroules

Answer 2

在A List Apart上有一篇关于解决类似问题的文章，你可以把它作为参考：Faux Columns。

- Roman

---

这是我认为最好的选择。接下来可以使用JavaScript。 - Patrick Hendricks

Answer 3

你的问题在于外部div会根据内部内容自动调整大小，而内部内容又会根据其内容自动调整大小。

你有几个选择：

• 使用@R0MANARMY答案中提到的背景解决方案来创建两个同样高的列的视觉效果。
• 将两个内部div的高度设置为完全相同的数字（使用px或em）
• 将外部div的高度设置为一个确切的数字。
• 尝试使用不同的值（如table-cell等）播放display属性。请记住，在某些旧浏览器中，这种方法不起作用。（不仅是IE，还有一些旧版Firefox和Chrome）
• 使用一个行和两个列的简单表格。

我意识到最后一个解决方案是所有解决方案中最有争议的。然而，这是您问题的可能解决方案，您至少应该评估一下。

（[呻吟]拜托了，请不要提到“语义化HTML”！在我们的宇宙中没有这样的东西。）

- Franci Penov

---

最终我使用了 jQuery 自动同步 DIV 元素的高度，这虽然是一种 hack 的方法...但我猜表格虽然被我和许多人认为是设计不佳，但它们可能更好。事实上，我认为我应该使用表格。也许打破最佳设计原则比使用完全的 hack 要好。 - Jake Petroules

Answer 4

也许是左侧 DIV 中的项目符号数量？

- Meiscooldude

---

我肯定不是一名网络开发者。 - Meiscooldude

Answer 5

你尝试过使用 height: auto; 或者 height: 100%; 吗？

- Autumn