Html 使div'；s的高度随其内容而扩展

我有这些嵌套的div，我需要主容器扩展（在高度上）以容纳里面的div

...

CSS是这样的：

*{
填充：0；
保证金：0；
}
梅因先生{
字体：100%Verdana，Arial，Helvetica，无衬线；
背景#4c5462；
保证金：0；
填充：0；
文本对齐：居中；
颜色：#000000；
}
.主容器{
高度：自动；
宽度：46em；
背景#4c5462；
保证金：0自动；
边框：0px实心#000000；
文本对齐：左对齐；
}
.main#主要内容{
填充物：5px；
边际：0px；
}
#项目清单{
宽度：400px；
浮动：左；
}
.项目清单{
宽度：400px；
浮动：左；
}
.项目(详情){
利润上限：3倍；
利润底部：3倍；
填充：3倍；
浮动：左；
边框底部：0.5px纯蓝色；
}

我遇到的问题是，

#main_content

无法拉伸以容纳所有内部div，结果是它们一直在背景下运行

---

考虑到上面的场景，我如何解决这个问题？

向

#main_content

div添加一个float属性-然后它将扩展以包含其浮动内容

通常我认为这可以通过强制清除

来解决：在
#items_列表的最后一个子元素上执行
规则

您可以使用：

#items_list:last-child {clear: both;}

或者，如果您使用的是动态语言，则在创建列表本身的循环中生成的最后一个元素中添加一个额外的类，这样您的html中就会出现如下内容：

<div id="list_item_20" class="last_list_item">

以下各项应起作用：

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

在关闭
#main_content
div之前，需要强制清除
：两个
。我可能会移动

进入
#main_content
div，并将CSS设置为：

.clear { clear: both; }

更新：这个问题仍然有相当多的流量，所以我想用一个现代化的替代方案更新答案，使用：


正文{
保证金：0；
}
.柔性容器{
显示器：flex；
弯曲方向：立柱；
最小高度：100vh；
}
标题{
背景色：#3F51B5；
颜色：#fff；
}
第1节内容{
弹性：1；
}
页脚{
背景色：#FFC107；
颜色：#333；
}

标题
内容
页脚
添加以下内容：

overflow:hidden;
height:1%;

到您的主分区。无需额外的

进行清除
 试试这个：
溢出：自动

它解决了我的问题。
在CSS中：
\clear\u div{clear:both；}

在内部div的div标记之后添加以下新div

<div id="clear_div"></div>



：有关更多信息，我自己在一个项目中遇到了这个问题-我在一个div中有一个表，它从div的底部溢出。我尝试过的所有高度固定都不起作用，但我发现了一个奇怪的固定方法，那就是在div的底部放一个只有一个句点的段落。然后将文本的“颜色”设置为与容器的背景相同。工作整洁如你所愿，无需javascript。不间断的空间不起作用——透明图像也不起作用

显然，它只需要看到表格下面有一些内容，就可以拉伸以容纳它。我不知道这对其他人是否有效

这是一种让设计师求助于基于表格的布局的东西——我花了大量的时间来解决这个问题，并使其跨浏览器兼容，这让我发疯
 将span标记与
display:inline block
css一起使用。然后，您可以使用CSS并以多种方式像div一样对其进行操作，但如果您不包括
宽度
或
高度
，它将根据其内容进行扩展和收缩

希望这能有所帮助。
如果您使用的是jQuery UI，他们已经有了一个类，它的工作原理就是一个魅力
在div内部的底部添加一个
，您希望使用
高度：auto展开该div
然后添加类名ui helper clearfix或使用此样式属性并添加，如下所示：

<div style=" clear:both; overflow:hidden; height:1%; "></div>



将jQuery UI类添加到clear div，而不是要扩展的div。
作为一种替代方法，您也可以尝试在某些情况下使用此方法

display:table;

看起来这样行得通

html {
 width:100%;
 height:auto;
 min-height:100%
} 

它将屏幕大小作为最小值，如果内容扩展，它将增长。
我只会使用

height: auto;

在你的div中。是的，我知道我有点晚了，但我想这可能会帮助一些人，就像它在这里会帮助我一样。
我知道这是一种旧线程，但是，这可以通过
min height
CSS属性以干净的方式实现，因此我将此保留在这里，以供将来参考：

我在这里根据OP发布的代码做了一个修改：，当您在其中删除和添加div时，您会注意到容器是如何扩展或减小大小的

除了操作代码之外，您只需完成以下两件事：

*主容器溢出（浮动div需要）

*min height css属性，此处提供更多信息：
当父Div的子元素浮动时，会出现此问题。以下是该问题的最新解决方案：

在CSS文件中，编写名为
.clearfix
的类以及伪选择器
：after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

然后，在HTML中，将
.clearfix
类添加到父Div中。例如：

<div class="clearfix">
    <div></div>
    <div></div>
</div>



它应该一直有效。您可以将类名称为.group而不是.clearfix，因为这将使代码更具语义。
请注意，无需在双引号“”之间的内容值中添加点甚至空格。而且，<div class="clearfix">
    <div></div>
    <div></div>
</div>

{ position:absolute }

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

class="container"

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

#container{height:auto}

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

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