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

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

当前回答

#clear_div{clear:both;

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

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

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

2012-03-16 01:43:09

其他回答

我将Bootstrap添加到一个项目中，其中的section标签设置为屏幕高度的100%。它工作得很好，直到我使项目响应，在这一点上，我借用了jennyfofenny的答案的一部分，所以当屏幕尺寸在较小的屏幕上改变时，我的部分背景与内容的背景相匹配。

我的新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，如果部分的宽度因为屏幕变小而缩小，部分的高度将扩大，内容将保持在部分内，背景将保持所需的颜色。

2016-05-30 20:11:22

如果你使用jQuery UI，他们已经有一个类的作品只是一个魅力在你想要扩展高度的div的底部添加一个<div>:auto; 然后添加一个类名ui-helper-clearfix或使用这个样式属性并像下面这样添加:

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

添加jQuery UI类到clear div，而不是你想要展开的div。

2013-06-28 03:16:12

当父Div的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案:

在你的CSS文件中写入下面的类。clearfix和伪选择器

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

然后，在你的HTML中，添加.clearfix类到你的父Div中。例如:

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

它应该一直工作。您可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。注意，在双引号“”之间的Content值中不需要添加点甚至空格。另外，overflow: auto;也许可以解决问题，但它会导致其他问题，如显示滚动条，不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

2014-06-15 02:44:48

增加如下内容:

overflow:hidden;
height:1%;

消除了需要额外的<br />清除。

2011-11-19 21:20:35

使用span标签，并附上display:inline-block css。然后你可以使用CSS和操作它像一个div在很多方面，但如果你不包括宽度或高度，它会根据它的内容展开和缩回。

希望这能有所帮助。

2012-05-08 12:21:40

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

推荐文章

最新文章

标签