How to dynamically increase the height of a <div /> based on the contents?

问题

I have a div on a page that I need to put content into. Sometimes the content is a few lines high, and sometimes the content is more than the screen height with varying sizes in between.

There is content below the div so I need that content to be pushed down appropriately, so the content below is always right below the div.

Basically, it looks as follows:

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

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

It's easy for me to specify a height for the #MainContentArea but I want the height to be adjusted dynamically. Can somebody please show me how to do this? Thanks.

回答1:

Resizing vertically to fit the content is the expected behavior. If you have specified floats somewhere in your css you may need to clear them:

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

回答2:

Don't specify a height, and the div will automatically resize with the contents.

If you need a minimum size, there is a CSS property called min-height that sets the minimum height of the div.

回答3:

#MainContentArea will always expand dynamically since its height is assigned as auto.

Since both have the same width, #BottomContentArea will be pushed down.

Instead of percentage, use exact widths.

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

回答4:

The height should resize automatically, and the bottom DIV should be pushed down in accordance with this height.

来源：https://stackoverflow.com/questions/3504246/how-to-dynamically-increase-the-height-of-a-div-based-on-the-contents