我有这些嵌套的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 accommodate 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,其结果是它们一直在与背景相反。

考虑到上述情况,我该如何解决这个问题?


当前回答

你需要在关闭#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单元,但如果您必须保持对旧浏览器的支持,请确保检查特定浏览器版本的兼容性。

其他回答

#clear_div{clear:both;

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

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

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

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

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

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

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

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

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

非常简单的方法

在父DIV上:

高度:100%;

这对我每次都有效

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

display:table;

js小提琴