没有静态高度的容器 div 中的 div 高度为 100%答案

【问题标题】：Divs heights 100% in a container div without static height没有静态高度的容器 div 中的 div 高度为 100%
【发布时间】：2011-08-04 17:17:41
【问题描述】：

我今天遇到了问题。我有 3 个高度可变的 div，我不知道其中哪一个会是最高的。我必须将它们并排放置，并始终将它们三个的高度设置为相同。所有 3 个 div 都定位在一个 wrapper div 中，但是这个不能有静态高度，它需要将自己调整为最高的孩子。

我的解决方案包括一些简单的javascript：

我希望你们中的一些人会发现它在某些时候有用...

【问题讨论】：

我拿出了 javascript，#wrap div 会根据您的需要自动获得最高的<div> 的高度http://jsfiddle.net/ajthomascouk/qqha2/4/。这是浏览器特有的问题吗？
我希望包装器内的所有 div 具有相同的高度。问题中有描述...

【解决方案1】：

试试这个例子：http://jsfiddle.net/rathoreahsan/Dyy4M/

【讨论】：

【解决方案2】：

离开我的评论后，我注意到你有一个清晰的 div：

<div class="clear" />

我反对使用标记来解决问题。这可以通过添加两条 CSS 行来完成：

#wrap
{
    position: relative;
    border: 2px solid red;
    float:left; /* NEW LINE */
    width:100%; /* NEW LINE */  
}

【讨论】：

【解决方案3】：

我认为为这种特殊情况创建一个表格更容易......有 1 行和 3 个单元格......在语义上不是 100% 正确，但我认为比自定义 javascript 更好......

【讨论】：

不不不！永远不要使用表格进行布局，马虎和懒惰。 @Ahsan Rathod 方法证明可以使用 CSS 完成
我同意您的评论 :) 但是我认为使用 javascript 会更糟。总结：不要使用这两种方法。
顺便说一句。不要仅仅因为有人提到桌子就给减号。谁告诉你它将用于布局:)？在很多情况下，您只想显示 3 块文本，而您不知道哪个更大。在这种情况下，餐桌不是罪过。是的，您可能可以在您提到的 div 上执行此操作，但目的是什么？表并不总是可怕的。想一想:)