Question

我有这些嵌套的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无法伸展以容纳所有内部div，结果是它们继续背景。

我该如何解决这个问题？

Answer 1

您需要在clear:both div关闭之前强制#main_content。我可能会将<br class="clear" />;移动到#main_content div并将CSS设置为：

.clear { clear: both; }

更新：此问题仍然会获得相当多的流量，因此我想使用new layout mode in CSS3 called Flexible boxes or 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>

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

Answer 2

试试这个： overflow: auto;

它适用于我的问题..

Answer 3

添加以下内容：

overflow:hidden;
height:1%;

到你的主要div。消除了对明文的额外<br />的需要。

Answer 4

作为替代方式，您也可以尝试在某些情况下使用

display:table;

jsFiddle

Answer 5

我会用

height: auto;

你的div中的

是的，我知道我有点晚了，但我认为这可能有助于像我这样的人会帮助我。

Answer 6

以下内容应该有效：

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

Answer 7

使用附加了display:inline-block css的span标记。然后，您可以使用CSS并以多种方式操作它，但如果您不包含width或height，则会根据其内容进行扩展和缩小。

希望有所帮助。

Answer 8

通常我认为可以通过在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; }

Answer 9

当父Div的子元素浮动时会出现此问题。以下是问题的最新解决方案：

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

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

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

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

它应该始终有效。您可以将类名称称为 .group 而不是 .clearfix ，因为它会使代码更具语义。请注意，在双引号＆＃34;＆＃34;之间不需要在 Content 的值中添加点或甚至空格。此外，溢出：自动; 可能会解决问题，但它会导致其他问题，例如显示滚动条，不推荐使用。

来源：Lisa Catalano和Chris Coyier的博客

Answer 10

将一个浮动属性添加到#main_content div - 然后它将展开以包含其浮动内容

Answer 11

在执行任何操作之前，请检查css规则：

{ position:absolute }

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

Answer 12

浮动元素不占用父元素内部的空间，顾名思义它们浮动！因此，如果明确没有向其子元素浮动的元素提供高度，则父元素将显示为收缩＆amp;似乎不接受子元素的维度，如果其子元素的给定clear:both;可能不会出现在屏幕上。有多种方法可以解决这个问题：

使用clear:both;属性在浮动元素下插入另一个元素，或在浮动元素的:after上使用display:inline-block;。
使用flex-box或float代替{{1}}。

Answer 13

看起来这样有效

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

屏幕尺寸最小，如果内容扩大，则会增长。

Answer 14

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

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

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

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

Answer 15

我将Bootstrap添加到一个项目中，section标签设置为屏幕高度的100％。它运作良好，直到我使项目响应，此时我借用了jennyfofenny's answer的一部分，所以当屏幕尺寸在较小的屏幕上更改时，我的部分背景与内容的背景相匹配。

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

Answer 16

你尝试过传统方式吗？给主容器高度：auto

#container{height:auto}

我已经习惯了这个，而且大部分时间都和我一起工作。

Answer 17

非常简单的方式

父母DIV：

height: 100%;

每次都为我工作

Answer 18

我自己在一个项目中碰到了这个 - 我在div里面有一个桌子，它正在从div的底部溢出。我尝试过的高度修正都没有，但我找到了一个奇怪的修复方法，那就是在div的底部放一个段落，只有一段时间。然后将文本的“颜色”设置为与容器的背景相同。随心所欲地工作，不需要javascript。不间断的空间不起作用 - 透明图像也不起作用。

显然，只需要看到桌子下方有一些内容就可以拉伸以包含它。我想知道这对其他人是否有用。

这是让设计师采用基于表格的布局的一种方式 - 我花费了大量时间来解决这些问题并使其跨浏览器兼容让我疯狂。

Answer 19

我试过这个并且有效

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

Answer 20

如果你正在使用jQuery UI，他们已经有一个类只是一个魅力在div中底部添加<div>，您希望使用height:auto;展开然后添加一个类名ui-helper-clearfix或使用此样式属性并添加如下：

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

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

Answer 21

我知道这是一个旧线程，但是，这可以用min-height CSS属性以干净的方式实现，所以我将把它留在这里以供将来参考：

我在这里根据OP发布的代码制作了一个小提琴：http://jsfiddle.net/U5x4T/1/，当您删除并添加内部div时，您会注意到容器如何扩展或缩小

除OP代码外，您需要实现此目的的唯一两件事是：

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

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

Answer 22

添加了显示：内联到div并且当高度内容变大然后设置div高度为200px

时它会自动增长（不是滚动内容）

Answer 23

您可以使用CSS Grid Layout。目前支持范围非常广泛：请在caniuse上进行检查。

这是jsfiddle上的example。还有example包含大量文本内容。

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

Answer 24

我几乎尝试了上面列出的每个建议，但没有一个起作用。但是，“ display：table”对我有用。

Answer 25

不需要使用很多CSS，只需使用bootstrap，然后使用：

class="container"

表示需要填写的div。

You can get bootstrap from here

使div的高度随其内容而扩大

25 个答案:

非常简单的方式