内部DIV填充父级DIV的高度

Question

抱歉，我不得不编辑我的问题：第二个图片是在Photoshop中制作的。

**我想找到DIV的等效替代方法。如何让div的行为像TD一样：所有TD根据内容调整其高度，并且所有TDS具有相同的高度到表元素底部。** 为什么用DIV这么难？这么多年过去了，难道没有标准解决方案吗？

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

- ryanjohnsond

---

请发布您正在使用的CSS。 - user2625787

尝试在容器中添加 overflow: hidden;。 - Adrift

我差点建议那样做，但是今天我已经那样回答了两个问题（而且都是正确的）。 - user2625787

我认为这就是答案，因为他包含了 css-float 标签 - 这通常是容器高度默认情况下随内容增长的罪魁祸首。 - Adrift

Answer 1

嗯，单凭CSS实现你提出的这个概念似乎非常困难。如果您愿意，JQuery可以更好地处理它。

无论如何，这里有另一种选择。它使用了一个巧妙的技巧，具体如下：

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

点击此处查看： http://jsfiddle.net/jplew/yPMVJ/

- JP Lew

---

感谢您的努力，JP！当我添加填充时，段落单元格会折叠。我尝试了一下，但只有段落上方的左列才会亮起来。我无法让它与col1 div一起工作。 这是我得到的：http://jsfiddle.net/ryanjohnsond/L7ukr/ 您有JQuery解决方案吗？ - ryanjohnsond

我正在查看CSS新手页面。如果您知道更好的解决方案，我很乐意看到它。CSS新手：http://www.cssnewbie.com/example/equal-heights/plugin.html - ryanjohnsond

为什么不使用100％而不是任意的负底边距和底部填充的大量数字？我在您的fiddle中尝试了一下，似乎可以工作，并且适用于高度超过2000px的情况。 - Sean Kendle

好吧，我实际上不能使用那个，因为我的div底部的阴影被裁剪了。将来我会记住这个方法。我咽下了自己的骄傲，改用"display: table-cell"。O_o我感到很惭愧。 - Sean Kendle

我很惊讶，现在已经是2014年了，我们仍然被CSS中的基本问题困扰着，就像这个问题一样。啊！ - John Hunt

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就知道要延伸到末尾。

- David Zhan Liu

---

这将强制外部容器增长到内部容器的大小，而不是相反。 - Sean Kendle

Answer 3

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

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

- mshsayem

Answer 4

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

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

我希望容器内的所有

都像表格单元格一样工作，而外部

则像< table >元素一样工作。外部

的高度应该是灵活的，并根据其他

中所有内容的高度进行调整。

- JP Lew

---

JP Lew，有没有办法关闭滚动条？我希望外部div的高度是灵活的，并根据其他div中所有内容的高度进行调整。 - ryanjohnsond

@user2374200 不要编辑别人的答案来展示图片。相反，将链接放在您的评论中，就像这样：http://i.stack.imgur.com/SQHhm.png - Jerry

杰瑞，你是怎么制作那个链接的？ - ryanjohnsond

看看这张图片：http://i.stack.imgur.com/SQHhm.png 随着内部内容的增长，包裹DIV（红色）也会随之增长，并保持其填充（就像表格一样）。 DIV的行为就像表格单元格： - ryanjohnsond

@user2374200 在上传图片后，您只需将链接粘贴到评论框中即可 :) - Jerry

我尝试了伪列，但它没有起作用：http://jsfiddle.net/ryanjohnsond/v5sBg/1/ - ryanjohnsond