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

Question

我在页面上有一个div，我需要将内容放入其中。有时内容高几行，有时内容大于屏幕高度，两者之间的大小不同。

div下面有内容，所以我需要适当地下推内容，所以下面的内容总是低于div。

基本上，它看起来如下：

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

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

我很容易为#MainContentArea指定高度，但我希望动态调整高度。有人可以告诉我该怎么做？感谢。

Answer 1

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

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

Answer 2

垂直调整大小以适合内容是预期的行为。如果你在css的某个地方指定了浮点数，你可能需要清除它们：

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

Answer 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>

Answer 4

高度应自动调整大小，底部DIV应按照此高度向下推。