使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，其结果是它们一直在与背景相反。

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

当前回答

我自己在一个项目上遇到了这个问题-我在一个div里面有一个表，它是从div的底部溢出来的。我尝试过的高度修复都没有工作，但我发现了一个奇怪的修复方法，那就是在div的底部放一个段落，里面只有一个句号。然后将文本的“颜色”设置为与容器的背景相同。工作整齐如你所愿，不需要javascript。不间断的空间是不行的，透明的图像也不行。

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

这是一种让设计师求助于基于表格的布局的事情——我花了大量的时间来解决这个问题，并使它跨浏览器兼容，这快把我逼疯了。

2012-04-20 21:19:05

其他回答

向#main_content div添加一个float属性——它将展开以包含它的浮动内容

2009-11-10 16:53:37

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

这是一种让设计师求助于基于表格的布局的事情——我花了大量的时间来解决这个问题，并使它跨浏览器兼容，这快把我逼疯了。

2012-04-20 21:19:05

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

2020-06-05 14:34:04

我会用

height: auto;

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

2014-03-07 02:16:18

你可以使用CSS网格布局。目前支持范围相当广:在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

2019-01-15 00:26:40

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

推荐文章

最新文章

标签