css - 内部 DIV 填充父 Div 的高度

Question

对不起。我不得不编辑我的问题：我在 Photoshop 中制作了第二张图片。

**我正在尝试找到与表格等效的 DIV。如何让 div 表现得像 TD：所有 TD 都会随着内容的增长调整它们的高度，并且所有 TDS 到 Table 元素底部的高度相同。** 为什么 DIV 这么难？这么多年了，难道没有标准解决方案吗？

1. 如何让两列 div 始终与容器 DIV 的高度相同（或始终下降到底部）？
2. 随着内部内容的增长，包装器 DIV（红色）将随之增长，并保持其填充（就像表格一样）。

Answer 1

是的，出于某种原因，您的概念似乎很难仅在 CSS 中实现。如果您对它持开放态度，JQuery 可以更好地处理它。

无论如何，这是另一种选择。它使用了一个巧妙的技巧，如下所示：

#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }

在这里查看：http: //jsfiddle.net/jplew/yPMVJ/

Answer 2

尝试这个

  <div name="outer">
   <div name="inner>put your contents here</div>
   <div style="clear: both"></div> 
  </div>

您需要一个具有“clear:both”样式的 div（clear both simple 使 div 占据一整行，没有任何东西可以在其周围浮动）在内部 div 的最末端，因此外部 div 知道延伸到最后.

Answer 3

可能您float在子 div 中有 s。在这种情况下，您可以执行以下任一操作：

1. 添加overflow:auto;到父 div 的样式。
2. 使用CSS Clearfix
3. 添加另一个标签（父 div 下的最后一个标签），其中包含clear:both上述答案的样式。

Answer 4

我使用简单的百分比在 JSfiddle 上模拟了一个解决方案：http: //jsfiddle.net/xLSQX/

否则，如上所述，请注意overflow:属性和clear: both。

我希望容器内的所有 div 都像表格单元格一样，而外部 div 像元素一样。外部 div 的高度可以灵活调整，以适应其他 div 内所有内容的高度。