如何使浮动的内部div与最高的div具有相同的高度

Question

如何使浮动的内部div与最高的div具有相同的高度

9

在下面的代码中，我希望具有“y”的div与具有3个“x”的div的高度相匹配。

<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元素是浮动的。

- Jase Whatson

也许你可以使用 CSS 等高列技巧？ - Matthew James Taylor

3个回答

5

你有三个选择。

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

没有简单的方法让两个div "共享" 高度。像100%高度这样的技巧在CSS属性和边框方面都存在跨浏览器问题，而你正在使用边框。边框通常是除了任何使用的高度之外的额外高度。

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

- cletus

-1 对于表格来说，这并不可行，因为你正在使用语义标记进行纯视觉的hack。屏幕阅读器用户会非常沮丧。 - Damian Keeghan

表格在使用媒体查询时不是一个好的选择。如果我有一个4x3的网格，我想将其缩小为3x4，然后再缩小为2x6，表格将无法实现。 - andrewtweber

3

如果您不反对使用jQuery，您可以使用EqualHeight，它应该能够满足您的需求。

- Dan F

尽管我不喜欢用JavaScript来做这种事情，但由于项目已经在使用jQuery，所以这是合适的选择。 - Jase Whatson

1

这个可能在选择答案时有效，但是在后来的jQuery版本中根本不起作用。a）$.browser.msie已经不存在了（改为$.support.boxModel），b）它设置了一个min-height，如果你已经在CSS中设置了更高的min-height，则会失败（我甚至不知道怎么发生的）。即使解决了这两个问题，它仍然无法正确设置高度。 - andrewtweber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DisgruntledGoat · Accepted Answer

我在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上使用背景图像，包括边框等。这种方法显然意味着一旦设置好，更改列（宽度、颜色）会有些困难。