使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 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的问题是#main_content不会伸展以容纳所有内部div，结果是它们不断背景。

我怎么解决这个问题？

#1楼

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

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

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

#2楼

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

希望有所帮助。

#3楼

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

#4楼

通常我认为这可以通过强制clear:both来解决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; }

#5楼

以下应该工作：

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3171641

标签

div

padding

clear