让div的高度随其内容而扩大
我有这些嵌套的div，我需要主容器扩大（在高度），以适应DIV内部
<!-- head --> ... <!-- /head --> <body class="main"> <div id="container"> <div id="header"> <!--series of divs in here, graphic banner etc. --> </div> <div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs --> <div id="items_list" class="items_list ui-sortable"> <div id="item_35" class="item_details"> </div> <div id="item_36" class="item_details"> </div> <div id="item_37" class="item_details"> </div> <!-- this list of DIVs "item_xx" goes on for a while each one representing a photo with name, caption etcetc --> </div> </div> <br class="clear"/> <div id="footer"> </div> </body> </html> CSS是这样的：
* { 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; }
我#main_content的问题是#main_content所有的内部div，结果是他们继续背景。
我该如何解决这个问题？
您需要强制clear:both在#main_content divclosures之前。 我可能会移动<br class="clear" />; 到#main_content div并设置CSS为：
.clear { clear: both; }
更新：这个问题仍然得到相当的stream量，所以我想用一个新的布局模式在CSS3中称为灵活盒子或Flexbox来更新答案：
body { margin: 0; } .flex-container { display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #3F51B5; color: #fff; } section.content { flex: 1; } footer { background-color: #FFC107; color: #333; }
<div class="flex-container"> <header> <h1> Header </h1> </header> <section class="content"> Content </section> <footer> <h4> Footer </h4> </footer> </div>
试试这个： overflow: auto;
它为我的问题工作..
添加以下内容：
overflow:hidden; height:1%;
到你的主格。 清除额外<br />的需要。
作为替代方法，您也可以尝试在某些情况下可能有用的这种方法
display:table;
的jsfiddle
以下应该工作：
.main #main_content { padding: 5px; margin: 0px; overflow: auto; width: 100%; //for some explorer browsers to trigger hasLayout }
我只会用
height: auto;
在你的分区。 是的，我知道我有点晚了，但我认为这可能会帮助像这样的人帮助我。
使用带有display:inline-block css的span标签。 然后，您可以使用CSS并以多种方式像div一样对其进行操作，但如果不包含width或height则会根据其内容进行展开和缩回。
希望有所帮助。
通常我认为这可以通过在#items_list的最后一个子元素上强制clear:both规则来解决。
你可以使用：
#items_list:last-child {clear: both;}
或者，如果您使用的是dynamic语言，则可以在任何循环中生成的最后一个元素中添加一个额外的类来创build列表本身，因此您最终得到的内容如下所示：
<div id="list_item_20" class="last_list_item">
和CSS
.last_list_item {clear: both; }
这个问题出现在Parent Div的Child元素被浮动时。 这是问题的最新解决scheme ：
在你的CSS文件中，写下下面这个叫做.clearfix的类以及伪select器：after
.clearfix:after { content: ""; display: table; clear: both; }
然后，在您的HTML中，将.clearfix类添加到您的父级Div。 例如：
<div class="clearfix"> <div></div> <div></div> </div>
它应该始终工作。 您可以将类名称调用.group而不是.clearfix ，因为它会使代码更加语义化。 请注意，在双引号“”之间不需要在内容的值中添加点或甚至空格。 另外， 溢出：自动; 可能会解决问题，但会导致其他问题，如显示滚动条，不build议。
来源：Lisa Catalano和Chris Coyier的博客
将一个浮动属性添加到#main_content div – 它将展开以包含其浮动的内容
看起来像这样的作品
html { width:100%; height:auto; min-height:100% }
它将屏幕尺寸降到最低，如果内容扩展，则会增长。
在做任何事情之前检查css规则：
{ position:absolute }
删除，如果存在，不需要它们。
在CSS中： #clear_div{clear:both;}
内部div的div标签后添加这个新的下面的div
<div id="clear_div"></div>
我将Bootstrap添加到了一个项目中，其中的section标签已经设置为屏幕高度的100％。 它运行良好，直到我做出了响应的项目，在这一点上，我借用了jennyfofenny的答案的一部分，所以当屏幕尺寸在较小的屏幕上更改时，我的部分背景匹配内容的背景。
我的新的CSS section看起来像这样：
section { // min-height so it looks good on big screen // but resizes on a small-screen min-height: 100%; min-height: 100vh; width:100%; width:100vh; }
假设你有一个特定颜色的部分。 通过使用min-height ，如果由于较小的屏幕而使节的宽度缩小，节的高度将扩大，内容将停留在节中，并且背景将保持所需的颜色。
我自己在一个项目上遇到了这个问题 – 我有一个表格在div的底部。 没有一个我尝试过的高度修正工作，但我发现它的一个奇怪的修复，那就是把一个段落在div的底部只有一段时间。 然后将文本的“颜色”设置为与容器的背景相同。 工作干净，你喜欢，没有JavaScript的要求。 一个不间断的空间将无法工作 – 也不会有透明的图像。
显然它只是需要看到表格下面有一些内容来扩展来包含它。 我想知道这是否会对其他人有用。
这就是让devise人员采用基于表格的布局的原因 – 我花费了大量的时间来研究这些东西，并使其跨浏览器兼容，这让我疯狂。
我试过这个，它的工作
<div style=" position: absolute; direction: ltr;height:auto; min-height:100%"> </div>
浮动元素不占用父元素内部的空间，顾名思义他们浮动！ 因此，如果高度明确地不提供给其子元素被浮动的元素，则父元素将看起来缩小和似乎不接受子元素的尺寸，如果其给定的overflow:hidden; 其子女可能不会出现在屏幕上。 有多种方法可以解决这个问题：
-
在浮动元素下方插入另一个元素，
clear:both;财产，或使用clear:both;on:after浮动元素之后。 -
使用
display:inline-block;或者flex-box而不是float。
如果你正在使用jQuery UI，他们已经有一个类的作品只是一个魅力添加一个<div>在<div>的底部，你想扩大height:auto; 然后添加一个类名ui-helper-clearfix或者使用这个样式属性，并添加如下：
<div style=" clear:both; overflow:hidden; height:1%; "></div>
将jQuery UI类添加到清除div，而不是要展开的div。
我知道这是一种古老的线程，但是，这可以用干净的方式用min-height CSS属性来实现，所以我将把它留在这里作为将来的参考：
我根据OP发布的代码在这里提出了一个小提琴： http : //jsfiddle.net/U5x4T/1/ ，当你删除和添加div里面，你会注意到如何容器扩大或缩小
除了OP代码外，您需要实现的唯一两件事情是：
*主容器溢出（浮动div需要）
*最低高度的CSS属性，更多信息可在这里： http : //www.w3schools.com/cssref/pr_dim_min-height.asp
增加显示：内联的div，它增长自动（而不是滚动的东西），当高度内容变大，然后设置div高度200px
你有没有尝试过传统的方式？ 给主容器高度：自动
#container{height:auto}
我用过这个，大部分时间都和我一起工作。
不需要使用大量的CSS，只需使用bootstrap，然后使用：
class="container"
为需要被填装的div。
你可以从这里获得引导
