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

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

当前回答

浮动元素不占用父元素内部的空间，顾名思义，它们是浮动的!因此，如果显式地没有为其子元素浮动的元素提供高度，则父元素将出现缩小并似乎不接受子元素的维度，如果其给定overflow:hidden;它的子节点可能不会出现在屏幕上。有很多方法可以解决这个问题:

在被浮动元素下面插入另一个元素，使用clear:both;财产，或使用清楚:两者;On:被浮动元素的后面。使用显示:inline-block;或者用flex box代替float。

2017-04-04 08:56:08

其他回答

增加了显示:内联到div和自动增长(不是滚动的东西)时，高度内容变得更大，然后设置div高度200px

2015-04-09 10:53:15

看起来效果不错

html {
 width:100%;
 height:auto;
 min-height:100%
}

它以屏幕尺寸为最小值，如果内容扩展，它就会增长。

2013-07-24 18:23:44

你试过传统的方法吗? 给出主容器高度:auto

#container{height:auto}

我用过这个方法，大部分时间都很有效。

2017-10-03 15:19:13

如果你使用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

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

2009-11-10 16:53:37

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

推荐文章

最新文章

标签