内部DIV填充父Div的高度

Question

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

**我正在尝试找到与表相当的DIV。你如何使div像TD一样行动：所有TD随着内容的增长调整它们的高度，并且所有TDS都与Table元素的底部具有相同的高度。 ** DIV为什么这么难？经过这么多年，是不是有标准的解决方案？

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

Answer 1

是的，出于某种原因，你的概念似乎很难在CSS中完成。如果你对它开放，JQuery可以更好地处理它。

无论如何，这是另一种选择。它使用clever trick如下：

#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（清除两个简单使得div占用整行，没有任何东西可以在它周围浮动）在你的内部div的最后，所以外部div知道扩展到最后。

Answer 3

可能你在儿童div中有float个。在这种情况下，您可以执行以下任一操作：

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内所有内容的高度。