向#main_content div添加一个float属性——它将展开以包含它的浮动内容

通常我认为这可以通过在#items_list的最后一个子元素上强制执行clear:both规则来解决。

你可以使用:

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

或者，如果你使用的是动态语言，在创建列表本身的循环中生成的最后一个元素中添加一个额外的类，这样你就会在html中得到这样的东西:

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

和css

.last_list_item {clear: both; }

以下应该工作:

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

你需要在关闭#main_content div之前强制执行clear:both。我可能会移动<br class="clear" />;进入#main_content div并设置CSS为:

.clear { clear: both; }

更新:这个问题仍然有相当多的流量，所以我想用一个现代的替代方案来更新答案，在CSS3中使用一个新的布局模式，称为Flexible boxes或Flexbox:

身体{ 保证金:0; ｝ .flex-container { 显示:flex; flex-direction:列; 最小高度:100 vh; ｝ 标题{ background - color: # 3 f51b5; 颜色:# fff; ｝ 部分。{内容 flex: 1; ｝ 页脚{ background - color: # FFC107; 颜色:# 333; ｝ < div class = " flex-container " > <标题> <标题> 头 < / h1 > 头> < / <节课= "内容" > 内容 < / >节 <页脚> < h4 > 页脚 < / h4 > > < /页脚 < / div >

大多数现代浏览器目前都支持Flexbox和viewport单元，但如果您必须保持对旧浏览器的支持，请确保检查特定浏览器版本的兼容性。

增加如下内容:

overflow:hidden;
height:1%;

消除了需要额外的<br />清除。

试试这个: 溢出:汽车;

这对我的问题有效。

#clear_div{clear:both;

在内部div的div标签后添加这个新的下面的div

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

http://www.w3schools.com/cssref/pr_class_clear.asp:获取更多信息

我自己在一个项目上遇到了这个问题-我在一个div里面有一个表，它是从div的底部溢出来的。我尝试过的高度修复都没有工作，但我发现了一个奇怪的修复方法，那就是在div的底部放一个段落，里面只有一个句号。然后将文本的“颜色”设置为与容器的背景相同。工作整齐如你所愿，不需要javascript。不间断的空间是不行的，透明的图像也不行。

显然，它只需要看到表下面有一些内容，以便拉伸以包含它。我想知道这对其他人是否也适用。

这是一种让设计师求助于基于表格的布局的事情——我花了大量的时间来解决这个问题，并使它跨浏览器兼容，这快把我逼疯了。

使用span标签，并附上display:inline-block css。然后你可以使用CSS和操作它像一个div在很多方面，但如果你不包括宽度或高度，它会根据它的内容展开和缩回。

希望这能有所帮助。

如果你使用jQuery UI，他们已经有一个类的作品只是一个魅力 在你想要扩展高度的div的底部添加一个<div>:auto; 然后添加一个类名ui-helper-clearfix或使用这个样式属性并像下面这样添加:

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

添加jQuery UI类到clear div，而不是你想要展开的div。

作为一种替代方法，你也可以尝试这种方法，在某些情况下可能是有用的

display:table;

js小提琴

看起来效果不错

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

它以屏幕尺寸为最小值，如果内容扩展，它就会增长。

我会用

height: auto;

是的，我知道我来晚了一点，但我想这可能会对别人有帮助，就像它在这里对我有帮助一样。

我知道这是一种旧的线程，然而，这可以用最小高度的CSS属性以一种干净的方式实现，所以我将在这里留下这个供将来参考:

我根据这里发布的OP代码做了一个小提琴:http://jsfiddle.net/U5x4T/1/，当你在里面删除和添加div时，你会注意到容器是如何扩大或缩小大小的

要做到这一点，除了OP代码，你只需要做两件事:

*主容器溢出(需要浮动div)

*最小高度CSS属性，更多信息可在这里:http://www.w3schools.com/cssref/pr_dim_min-height.asp

当父Div的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案:

在你的CSS文件中写入下面的类。clearfix和伪选择器

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

然后，在你的HTML中，添加.clearfix类到你的父Div中。例如:

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

它应该一直工作。您可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。 注意，在双引号“”之间的Content值中不需要添加点甚至空格。另外，overflow: auto;也许可以解决问题，但它会导致其他问题，如显示滚动条，不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

在做任何事情之前检查css规则:

{ position:absolute }

删除如果存在，不需要他们。

增加了显示:内联到div和自动增长(不是滚动的东西)时，高度内容变得更大，然后设置div高度200px

我将Bootstrap添加到一个项目中，其中的section标签设置为屏幕高度的100%。它工作得很好，直到我使项目响应，在这一点上，我借用了jennyfofenny的答案的一部分，所以当屏幕尺寸在较小的屏幕上改变时，我的部分背景与内容的背景相匹配。

我的新section CSS看起来是这样的:

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，如果部分的宽度因为屏幕变小而缩小，部分的高度将扩大，内容将保持在部分内，背景将保持所需的颜色。

不需要使用大量的CSS，只需使用bootstrap，然后使用:

class="container"

用于需要填充的div。

你可以从这里得到bootstrap

我试过了，效果很好

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

浮动元素不占用父元素内部的空间，顾名思义，它们是浮动的!因此，如果显式地没有为其子元素浮动的元素提供高度，则父元素将出现缩小并似乎不接受子元素的维度，如果其给定overflow:hidden;它的子节点可能不会出现在屏幕上。有很多方法可以解决这个问题:

在被浮动元素下面插入另一个元素，使用clear:both;财产，或使用清楚:两者;On:被浮动元素的后面。 使用显示:inline-block;或者用flex box代替float。

你试过传统的方法吗? 给出主容器高度:auto

#container{height:auto}

我用过这个方法，大部分时间都很有效。

非常简单的方法

在父DIV上:

高度:100%;

这对我每次都有效

你可以使用CSS网格布局。目前支持范围相当广:在caniuse上检查它。

下面是jsfiddle的示例。还有大量文本的例子。

HTML代码:

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

CSS代码:

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

我尝试了上面列出的每一条建议，但没有一条奏效。然而，“display: table”对我来说很管用。

我试过身高:适合的内容，它对我很有效