使div的高度随其内容扩展

无需使用大量CSS，只需使用引导程序，然后使用：

class="container"

用于需要填充的div。

您可以从这里获得引导

在div上添加了display：inline，当高度内容大于设置的div高度200px时，它会自动增长（而不是滚动的东西）

您可以使用CSS Grid Layout。目前支持范围非常广泛：请在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

我知道这是一种旧线程，但是，可以通过min-heightCSS属性以一种干净的方式实现这一点，因此，这里我将其留作以后参考：

我根据此处的OP发布代码创建了一个小提琴：http : //jsfiddle.net/U5x4T/1/，当您在其中删除并添加div时，您会注意到容器如何扩大或减小大小

除了OP代码外，您仅需完成以下两项操作即可：

*主容器中的溢出（浮动div必需）

* min-height css属性，可在此处获取更多信息：http : //www.w3schools.com/cssref/pr_dim_min-height.asp

如果您使用的是jQuery UI，则它们已经有一个类，该类的作用只是一个魅力 而已<div>，在您要扩展的div的底部height:auto;添加一个a ，然后添加一个类名ui-helper-clearfix或使用此style属性并按如下所示添加：

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

将jQuery UI类添加到clear div，而不是要扩展的div。

我尝试了这个并且有效

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

我自己在一个项目中遇到了这个问题-我的div内有一张桌子从div的底部溢出。我尝试的所有高程修复方法均无济于事，但我发现了一个怪异的修复方法，那就是在div的底部放置一个段落，其中只包含一个句点。然后将文本的“颜色”设置为与容器的背景相同。工作整洁，您可以随意使用，不需要javascript。不间断的空间将不起作用-透明的图像也不起作用。

显然，只需要查看表格下方有一些内容即可进行拉伸以包含表格。我想知道这是否对其他任何人都有效。

这种事情使设计师不得不诉诸于基于表格的布局-我花了很多时间弄清楚这些东西并使之与浏览器兼容，这使我发疯。

您是否尝试过传统方式？给出主容器高度：自动

#container{height:auto}

我已经使用了它，并且在大多数情况下都可以使用。

在CSS中： #clear_div{clear:both;}

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

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

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

我将Bootstrap添加到section具有设置为屏幕高度100％的标签的项目中。在我使项目响应之前，它一直很好用，这时我借用了jennyfofenny的答案的一部分，因此当屏幕尺寸在较小的屏幕上更改时，我的部分背景与内容的背景匹配。

我的新sectionCSS如下所示：

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，如果部分的宽度由于屏幕较小而缩小，则该部分的高度将扩大，内容将保留在该部分内，并且背景将保持所需的颜色。

看起来像这个作品

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

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

浮动元素不会占据父元素内部的空间，顾名思义，它们是浮动的！因此，如果未明确为其浮动子元素的元素提供高度，则父元素将缩小并且看起来不接受子元素的尺寸，即使给定overflow:hidden;其子元素的元素也可能未出现在屏幕上。有多种方法可以解决此问题：

1. 在具有clear:both;属性的浮动元素下方插入另一个元素，或在浮动元素clear:both;上使用on :after。

2. 使用display:inline-block;或flex-box代替float。

在#main_contentdiv中添加一个float属性-然后它将展开以包含其浮动内容

在执行任何操作之前，请使用以下命令检查CSS规则：

{ position:absolute }

删除（如果存在）并且不需要它们。

当父Div的Child元素浮动时，会出现此问题。这是该问题的最新解决方案：

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

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

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

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

它应该一直工作。你可以调用类的名称。集团而不是.clearfix，因为它使代码更语义。请注意，不必在双引号“”之间的Content值中添加点或什至空格。另外，溢出：自动；也许可以解决问题，但是会引起其他问题，例如显示滚动条，因此不建议这样做。

来源：Lisa Catalano和Chris Coyier博客

很简单的方法

在父级DIV上：

height: 100%;

每次都对我有用

使用跨度标签和display:inline-block附加的CSS。然后，您可以使用CSS和操纵它就像在很多方面一个div，但如果你不包括width或height它基于它的内容扩展和伸缩。

希望能有所帮助。

通常，我认为可以通过clear:both对的最后一个子元素施加规则来解决此问题#items_list。

您可以使用：

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

或者，如果您使用的是动态语言，则在循环创建列表本身的最后一个循环中生成的最后一个元素中添加一个附加类，以便最终在html中添加以下内容：

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

和CSS

.last_list_item {clear: both; }

我只会用

height: auto;

在您的div中 是的，我知道我来晚了一点，但我认为这可能会对某人有所帮助，就像它在这里对我有帮助。

以下应该工作：

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

添加以下内容：

overflow:hidden;
height:1%;

到您的主要部门 消除了对额外内容的需求<br />。

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

display:table;

jsFiddle

尝试这个： overflow: auto;

它解决了我的问题。

您需要clear:both在#main_contentdiv关闭之前强制输入a 。我可能会将其<br class="clear" />;移入#main_contentdiv并将CSS设置为：

.clear { clear: both; }

更新：这个问题仍然有相当多的流量，因此我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式，以现代替代方法来更新答案：

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>

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