使div的高度随着其内容展开

我有这些嵌套的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 #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

2009-11-10 16:55:57

其他回答

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

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

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

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

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

2014-03-07 17:57:22

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

class="container"

用于需要填充的div。

你可以从这里得到bootstrap

2016-06-21 11:07:38

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

2009-11-10 16:54:42

我会用

height: auto;

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

2014-03-07 02:16:18

我试过了，效果很好

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

2016-06-26 11:49:25

使div的高度随着其内容展开

推荐文章

最新文章

标签