如何使浮动的内部 div 与最高 div 的高度相同答案

【问题标题】：How to make floating inner divs the same height as the highest div如何使浮动的内部 div 与最高 div 的高度相同
【发布时间】：2010-10-26 19:18:11
【问题描述】：

在下面的代码中，我希望带有 'y' 的 div 将 div 的高度与 3 个 'x' 匹配。

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

需要注意的是内部 div 是浮动的。

【问题讨论】：

也许您可以使用CSS equal height columns 技巧？

标签： css html css-float height

【解决方案1】：

我在 A List Apart 看到了一个解决方案（我认为），您可以在其中为两个内部列提供一个巨大的底部填充，但与负边距相同的巨大值。只要列不超过 32000px 高，这一切都有效，这很少见。比如：

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

...其中“col”是任何列的类名。然后，您可以使用单独的类为各个列设置您喜欢的样式。

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

另一种选择是在外部 div 上使用背景图像，包括边框等。这种方法显然意味着一旦设置更改列（宽度、颜色）会有点困难。

【讨论】：

在容器上设置overflow: hidden 后，这对我有用（IE 7-9 和 FF）。
非常好，但还不够！如果我对内部 div 应用边框或圆角，则会在底部切掉。

【解决方案2】：

你有三个选择。

使内部 div 与外部 div 一样高。这并不难；
将内部 div 放入另一个 div 并尝试使用 height 和/或 min-height 100% 使它们与包含 div 一样高，尽管我怀疑这不会起作用，因为包含 div 可能会拉伸到高度其包含的 div 或页面。不过，这可能值得一试；或者，最简单的
使用表格。这个问题对于表格来说是微不足道的。这是pure CSS deficiencies 的一个很好的例子。

没有简单的方法可以让两个 div “共享”高度。像 100% 高度这样的技巧在您需要使用的 CSS 属性和您正在使用的边框方面都存在跨浏览器问题。边框通常是在您使用的任何高度之外的。

有些人可能会说使用 display: table-cell，但对它的支持相当有限（在 IE 上）。

【讨论】：

-1 用于表 - 这是无法访问的，因为您正在使用语义标记进行纯粹的视觉黑客攻击。屏幕阅读器用户会非常沮丧。
在使用媒体查询时，表格不是一个好的选择。如果我有一个 4x3 网格，我想先缩小到 3x4，然后再缩小到 2x6，表格将无法工作。

【解决方案3】：

如果你对 jQuery 的某个地方不反感，你可以使用EqualHeight，它应该做你想做的事

【讨论】：

虽然我讨厌在这种事情上使用 Javascript，但这是合适的，因为该项目已经在使用 JQuery。
这可能在选择答案时有效，但在更高版本的 jQuery 中根本不起作用。 a）$.browser.msie 不再存在（更改为$.support.boxModel），b）它设置了一个最小高度，如果你已经在 CSS 中设置了一个更高的最小高度，它会失败（即使发生这种情况，我也不知道）不知道）。即使解决了这两件事，它也没有正确设置高度。