blocks|key|1196086|text|将浮点属性添加到#main_content目录中-然后它将展开以包含其浮点内容|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196087|entityMap^0|8|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

add a float property to the <code>#main_content</code> div - it will then expand to contain its floated contents

blocks|key|1196132|text|通常，我认为这可以通过在#items_list的最后一个子元素上强制使用clear:both规则来解决。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196133|您可以使用：|1196134|#items_list:last-child+{clear:+both;}|code-block|syntax|javascript|1196135|或者，如果您使用的是动态语言，则在创建列表本身的任何循环中生成的最后一个元素中添加一个额外的类，这样您的html中就会出现如下内容：|1196136|<div+id="list_item_20"+class="last_list_item">|1196137|和css|1196138|.last_list_item+{clear:+both;+}|1196139|entityMap^0|C|B|10|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|V|$]]

Typically I think this can be resolved by forcing a <code>clear:both</code> rule on the last child-element of the <code>#items_list</code>.

You can either use:

<pre><code>#items_list:last-child {clear: both;}
</code></pre>

Or, if you're using a dynamic language, add an additional class to the last element generated in whatever loop creates the list itself, so you end up with something in your html like:

<pre><code>&lt;div id="list_item_20" class="last_list_item"&gt;
</code></pre>

and css

<pre><code>.last_list_item {clear: both; }
</code></pre>

blocks|key|1196170|text|下面的方法应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196171|.main+#main_content+{
++++padding:+5px;
++++margin:+0px;
++++overflow:+auto;
++++width:+100%25;+//for+some+explorer+browsers+to+trigger+hasLayout
}|code-block|syntax|javascript|1196172|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Thw following should work:

<pre><code>.main #main_content {
 padding: 5px;
 margin: 0px;
 overflow: auto;
 width: 100%; //for some explorer browsers to trigger hasLayout
}
</code></pre>

blocks|key|1196207|text|添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196208|overflow:hidden;
height:1%25;|code-block|syntax|javascript|1196209|添加到您的主div。不再需要额外的<br+/>来清除。|offset|length|style|CODE|1196210|entityMap^0|0|0|H|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

add the following:

<pre><code>overflow:hidden;
height:1%;
</code></pre>

to your main div. Eliminates the need for the extra <code>&lt;br /&gt;</code> for the clear.

blocks|key|1196235|text|试试这个：overflow:+auto;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196236|它解决了我的问题..|1196237|entityMap^0|5|F|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

Try this:
<code>overflow: auto;</code>

It worked for my problem..

blocks|key|1196285|text|在CSS中：#clear_div{clear:both;}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196286|在内部div的div标记之后，添加以下新div|1196287|<div+id="clear_div"></div>|code-block|syntax|javascript|1196288|http://www.w3schools.com/cssref/pr_class_clear.asp：了解更多信息|1196289|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/pr_class_clear.asp^0|6|N|0|0|0|0|1E|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

In CSS: <code>#clear_div{clear:both;}</code>

After the div tag of the inner div add this new following div 

<pre><code>&lt;div id="clear_div"&gt;&lt;/div&gt;
</code></pre>

<a href="http://www.w3schools.com/cssref/pr_class_clear.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_class_clear.asp</a> : for more information

blocks|key|1196373|text|我自己在一个项目中遇到了这个问题--我在一个div中有一个表，它从div的底部溢出出来。我尝试的高度修正都不起作用，但我找到了一个奇怪的修正，那就是在div的底部放一个段落，里面只有一个句号。然后将文本的“颜色”样式设置为与容器的背景相同。按照你的喜好整齐地工作，不需要javascript。不间断的空格不起作用--透明的图像也不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196374|显然，它只需要看到表格下面有一些内容，以便扩展以容纳它。我想知道这是否适用于其他人。|1196375|这是一种让设计师求助于基于表格的布局的东西--我花了大量的时间来弄清楚这些东西，并使其跨浏览器兼容，这让我抓狂。|1196376|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

I'm running into this on a project myself - I had a table inside a div that was spilling out of the bottom of the div. None of the height fixes I tried worked, but I found a weird fix for it, and that is to put a paragraph at the bottom of the div with just a period in it. Then style the "color" of the text to be the same as the background of the container. Worked neat as you please and no javascript required. A non-breaking space will not work - nor does a transparent image. 

Apparently it just needed to see that there is some content below the table in order to stretch to contain it. I wonder if this will work for anyone else.

This is the sort of thing that makes designers resort to table-based layouts - the amount of time I've spent figuring this stuff out and making it cross-browser compatible is driving me crazy.

blocks|key|1411690|text|使用附加了display:inline-block+css的span标记。然后，您可以使用CSS并以多种方式像div一样操作它，但是如果不包含width或height，它将根据其内容进行扩展和收缩。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411691|希望这能有所帮助。|1411692|entityMap^0|5|K|1Z|5|25|6|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Use the span tag with <code>display:inline-block</code> css attached to it. You can then use CSS and manipulate it like a div in lots of ways but if you don't include a <code>width</code> or <code>height</code> it expands and retracts based on its content.

Hope that helps.

blocks|key|1411738|text|如果你使用的是jQuery+UI，他们已经有了一个类works+just+a+charm在你想要用height:auto;展开的div里面的底部添加一个<div>，然后添加一个类名ui-helper-clearfix或使用这个样式属性添加，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1411739|<div+style="+clear:both;+overflow:hidden;+height:1%25;+"></div>|code-block|syntax|javascript|1411740|将jQuery+UI类添加到clear目录中，而不是要展开的目录中。|1411741|entityMap^0|1D|C|24|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

If you are using jQuery UI, they already have a class the works just a charm 
add a <code>&lt;div&gt;</code> at the bottom inside the div that you want expand with <code>height:auto;</code>
then add a class name ui-helper-clearfix or use this style attribute and add just like below:



<pre><code>&lt;div style=" clear:both; overflow:hidden; height:1%; "&gt;&lt;/div&gt;
</code></pre>

add jQuery UI class to the clear div, not the div the you want to expand.

blocks|key|1411778|text|作为一种替代方法，您也可以尝试在某些情况下使用此方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1411779|display:table;|code-block|syntax|javascript|1411780|jsFiddle|offset|length|1411781|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/XmKrm/22/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

as an alternative way you can also try this that may be usefull in some situations 

<pre><code>display:table;
</code></pre>

<a href="http://jsfiddle.net/XmKrm/22/" rel="noreferrer">jsFiddle</a>

blocks|key|1196551|text|看起来这行得通|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196552|html+{
+width:100%25;
+height:auto;
+min-height:100%25
}+|code-block|syntax|javascript|1196553|它将屏幕大小设为最小，如果内容扩展，则会增长。|1196554|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Looks like this works

<pre><code>html {
 width:100%;
 height:auto;
 min-height:100%
} 
</code></pre>

It takes the screen size as minimum, and if the content expands it grows.

blocks|key|1196845|text|我只会使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196846|height:+auto;|code-block|syntax|javascript|1196847|在您的div中。是的，我知道我来晚了，但我想这可能会帮助像它这样的人，如果它在这里的话也会帮助我的。|1196848|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I would just use

<pre><code>height: auto;
</code></pre>

in your div. Yes, I know I'm a-little late but I figured this might help somebody like it would have helped me if it was here.

blocks|key|1196903|text|我知道这是一种古老的线程，然而，这可以通过min-height+CSS属性以一种干净的方式实现，所以我将把它留在这里供以后参考：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1196904|我根据这里发布的OP代码做了一个调整：http://jsfiddle.net/U5x4T/1/，当您在其中删除和添加div时，您会注意到容器是如何扩展或减小大小的|1196905|要实现这一点，除了操作码之外，您需要做的只有两件事：|1196906|*主容器溢出(浮动div需要)|1196907|*最小高度css属性，更多信息可在此处查看：http://www.w3schools.com/cssref/pr_dim_min-height.asp|1196908|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/U5x4T/1/|1|http://www.w3schools.com/cssref/pr_dim_min-height.asp^0|L|A|0|J|S|0|0|0|0|M|1H|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|15|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|N|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]|V|$5|Q|R|S|E|$T|W]]]]

I know this is kind of old thread, however, this can be achieved with <code>min-height</code> CSS property in a clean way, so I'll leave this here for future references:

I made a fiddle based on the OP posted code here: <a href="http://jsfiddle.net/U5x4T/1/" rel="nofollow">http://jsfiddle.net/U5x4T/1/</a>, as you remove and add divs inside, you'll notice how does the container expands or reduces in size

The only 2 things you need to achieve this, additional to the OP code is:

*Overflow in the main container (required for the floating divs)

*min-height css property, more info available here: <a href="http://www.w3schools.com/cssref/pr_dim_min-height.asp" rel="nofollow">http://www.w3schools.com/cssref/pr_dim_min-height.asp</a>

blocks|key|1196982|text|在执行任何操作之前，请使用以下命令检查css规则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1196983|{+position:absolute+}|code-block|syntax|javascript|1196984|如果存在并且不需要它们，则将其删除。|1196985|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Before to do anything check for css rules with:

<pre><code>{ position:absolute }
</code></pre>

Remove if exist and don't need them.

blocks|key|1412275|text|添加显示:内联到div，当高度内容大于设置的div高度200px时，它会自动增长(而不是滚动内容)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412276|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Added display:inline to the div and it grew auto ( not the scroll stuff ) when height content got bigger then the set div height of 200px

blocks|key|1197146|text|不需要使用很多CSS，只需使用bootstrap，然后使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1197147|class="container"|code-block|syntax|javascript|1197148|用于需要填充的div。|1197149|You+can+get+bootstrap+from+here|offset|length|1197150|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css^0|0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

No need to use a lot of CSS, just use bootstrap, then use:

<pre><code>class="container"
</code></pre>

for the div that needs to be filled.

<a href="http://getbootstrap.com/css" rel="nofollow">You can get bootstrap from here</a>

blocks|key|1197194|text|我试过了，它起作用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1197195|<div+style="+position:+absolute;+direction:+ltr;height:auto;+min-height:100%25">+++</div>|code-block|syntax|javascript|1197196|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I tried this and it worked

<pre><code>&lt;div style=" position: absolute; direction: ltr;height:auto; min-height:100%"&gt; &lt;/div&gt;
</code></pre>

blocks|key|1412442|text|你试过传统的方法吗？给出主容器高度:auto|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412443|#container{height:auto}|code-block|syntax|javascript|1412444|我用过这个方法，它在大多数情况下对我都有效。|1412445|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Have you tried the traditional way?
give the main container height:auto

<pre><code>#container{height:auto}
</code></pre>

I have used this and it worked most of the times with me.

blocks|key|1197264|text|非常简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1197265|在父DIV上：|1197266|height:+100%25;|offset|length|style|CODE|1197267|这对我来说每次都是有效的|1197268|entityMap^0|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@$F|Q|G|R|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

<h3>Very simple way</h3>
On parent DIV:
<code>height: 100%;</code>
This work for me every time

blocks|key|1412538|text|您可以使用CSS+Grid+Layout。目前支持范围相当广泛:请在caniuse上查看。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1412539|这是jsfiddle上的example。此外，example还有大量的文本内容。|1412540|HTML代码：|1412541|<div+class="container">
++<div+class="header">
+++Header
++</div>
++<div+class="content">
+++Content
++</div>
++<div+class="footer">
+++Footer
++</div>
</div>|code-block|syntax|javascript|1412542|CSS代码：|1412543|html,+body+{
++width:+100%25;
++height:+100%25;
++margin:+0;
}

.container+{
++width:+100%25;
++height:+100%25;

++display:+grid;
++grid-template-rows:+100px+auto+150px;
++grid-template-columns:+auto;
}
//+style+stuff|1412544|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout|1|https://caniuse.com/#feat=css-grid|2|http://jsfiddle.net/1rufoe8a/1/|3|http://jsfiddle.net/1rufoe8a/2/^0|5|F|0|Y|7|1|0|C|7|2|N|7|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]|$A|18|B|19|1|1A]]|C|$]]|$1|D|3|E|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1K|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1L|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1M|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]|12|$5|T|U|V|C|$W|13]]]]

You can use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow noreferrer">CSS Grid Layout</a>. Support is rather wide at the moment: check it on <a href="https://caniuse.com/#feat=css-grid" rel="nofollow noreferrer">caniuse</a>.

Here is the <a href="http://jsfiddle.net/1rufoe8a/1/" rel="nofollow noreferrer">example</a> on jsfiddle. Also <a href="http://jsfiddle.net/1rufoe8a/2/" rel="nofollow noreferrer">example</a> with tons of text stuff.

HTML code:

<pre><code>&lt;div class="container"&gt;
 &lt;div class="header"&gt;
 Header
 &lt;/div&gt;
 &lt;div class="content"&gt;
 Content
 &lt;/div&gt;
 &lt;div class="footer"&gt;
 Footer
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

CSS Code: 

<pre><code>html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

.container {
 width: 100%;
 height: 100%;

 display: grid;
 grid-template-rows: 100px auto 150px;
 grid-template-columns: auto;
}
// style stuff
</code></pre>

blocks|key|1412581|text|我几乎尝试了上面列出的每一个建议，但都没有奏效。然而，"display:+table“为我做到了这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1412582|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I tried pretty much every suggestion listed above and none of them worked. However, "display: table" did the trick for me.

I have these nested divs and I need the main container to expand (in height) to accommodate the DIVs inside

<pre class="lang-html prettyprint-override"><code> &lt;!-- head --&gt;
 ...
 &lt;!-- /head --&gt;

 &lt;body class="main"&gt;
 &lt;div id="container"&gt;
 &lt;div id="header"&gt;
 &lt;!--series of divs in here, graphic banner etc. --&gt;
 &lt;/div&gt;

 &lt;div id="main_content"&gt; &lt;!-- this DIV _should_ stretch to accommodate inner divs --&gt;
 &lt;div id="items_list" class="items_list ui-sortable"&gt;
 &lt;div id="item_35" class="item_details"&gt;
 &lt;/div&gt;
 &lt;div id="item_36" class="item_details"&gt;
 &lt;/div&gt; 
 &lt;div id="item_37" class="item_details"&gt;
 &lt;/div&gt;
 &lt;!-- this list of DIVs "item_xx" goes on for a while
 each one representing a photo with name, caption etcetc --&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;br class="clear"/&gt;

 &lt;div id="footer"&gt;
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

CSS is this:

<pre class="lang-css prettyprint-override"><code>* {
 padding: 0;
 margin: 0;
}

.main {
 font: 100% Verdana, Arial, Helvetica, sans-serif;
 background: #4c5462;
 margin: 0; 
 padding: 0;
 text-align: center; 
 color: #000000;
}
.main #container {
 height: auto;
 width: 46em;
 background: #4c5462;
 margin: 0 auto; 
 border: 0px solid #000000;
 text-align: left; 
}

.main #main_content {
 padding: 5px;
 margin: 0px;
}
#items_list {
 width: 400px;
 float: left;
}

.items_list {
 width: 400px;
 float: left;
}
.item_details {
 margin-top: 3px;
 margin-bottom: 3px;
 padding: 3px;
 float: left;
 border-bottom: 0.5px solid blue;
}
</code></pre>

The problem I have is that <code>#main_content</code> doesn't stretch to accommodate all the inner divs, with the result that they keep going against the background.

How can I solve this problem considering the above scenario?

make div's height expand with its content

容器

jQuery

我有这些嵌套的divs，我需要扩展主容器(在高度上)以容纳内部的DIVs。  ...  <body class="main"> <div id="container"> <div id="header"> ...

问使div的高度随其内容扩展
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使div的高度随其内容扩展EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使div的高度随其内容扩展
EN