如何根据内容动态增加 <div /> 的高度？答案

【问题标题】：How to dynamically increase the height of a <div /> based on the contents?如何根据内容动态增加 <div /> 的高度？
【发布时间】：2011-03-31 01:47:42
【问题描述】：

我在需要将内容放入的页面上有一个 div。有时内容高几行，有时内容超过屏幕高度，其间大小不一。

div 下方有内容，所以我需要适当下推该内容，因此下方的内容始终位于 div 的正下方。

基本上如下所示：

<div id="MainContentArea"><!-- my content --></div>

<div id="BottomContentArea"><!-- pre-existing content --></div>

为#MainContentArea 指定高度对我来说很容易，但我希望动态调整高度。有人可以告诉我如何做到这一点吗？谢谢。

【问题讨论】：

只要内容不浮动，容器应该已经自动下推了吧？
您是否正在处理浮动和未正确包含它们的容器？
很高兴看到这些 ID 的 CSS 代码。默认情况下，DIV 元素将根据内容展开。但我假设您使用的是 absolute: 具有特定高度和宽度的定位。我们需要查看您的 CSS。

标签： css html height

【解决方案1】：

不指定高度，div会随内容自动调整大小。

如果您需要最小尺寸，有一个名为 min-height 的 CSS 属性可以设置 div 的最小高度。

【讨论】：

请注意 ie6 只支持 min-height 用于 TD 的...虽然 ie6 应该已经死了

【解决方案2】：

垂直调整大小以适应内容是预期的行为。如果您在 CSS 中的某处指定了浮点数，您可能需要清除它们：

<div style="clear:both;"></div>

【讨论】：

原来是这样——我没有像这里和其他地方建议的那样使用花车。但是，我从异步请求中获取了 MainContentArea 的内容。我将它的 CSS 指定为 clear: both;，它成功了。
我喜欢 stackoverflow，很清楚：两者都对我有用。

【解决方案3】：

#MainContentArea 将始终动态扩展，因为它的高度被指定为自动。

由于两者的宽度相同，#BottomContentArea 将被下推。

使用精确的宽度代替百分比。

<div id="MainContentArea" style="float:left;height:auto;width:100%;">
<!-- my content -->
</div>

<div id="BottomContentArea" style="float:left;height:auto;width:100%;s">
<!-- pre-existing content -->
</div>

【讨论】：

你能解释一下你在这里做了什么吗？
@JonasG.Drange "MainContentArea" 将始终动态扩展，因为它的高度被指定为自动。因为两者具有相同的宽度，“BottomContentArea”将被向下推。如果需要，而不是百分比使用精确的宽度（确保你有一个 div，其中包含具有相同宽度的这两个 div）。希望你知道这一点.. 顺便说一句，对 *s 感到抱歉

【解决方案4】：

高度应该会自动调整大小，底部的DIV应该按照这个高度往下推。

【讨论】：