使div的高度随其内容扩展

小编典典

使div的高度随其内容扩展

css

我有这些嵌套的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，结果它们一直在后台运行。

考虑到以上情况，如何解决此问题？

阅读 356

2020-05-16

共1个答案

小编典典

您需要clear:both在#main_contentdiv关闭之前强制输入a 。我可能会将其<br class="clear" />;移入#main_contentdiv并将CSS设置为：

.clear { clear: both; }

更新：
这个问题仍然有相当多的流量，所以我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式，以一种现代的替代方法来更新答案：

body {

  margin: 0;

}



.flex-container {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



header {

  background-color: #3F51B5;

  color: #fff;

}



section.content {

  flex: 1;

}



footer {

  background-color: #FFC107;

  color: #333;

}


<div class="flex-container">

  <header>

    <h1>

     Header

    </h1>

  </header>



  <section class="content">

    Content

  </section>



  <footer>

    <h4>

      Footer

    </h4>

  </footer>

</div>

当前，大多数现代浏览器都支持Flexbox和视口单元，但是如果您必须保持对旧版浏览器的支持，请确保检查特定浏览器版本的兼容性。

2020-05-16