表格Div高度随内容扩展

Question

我有一个div具有以下css属性

#maindiv {
   padding: 0px 30px 15px 30px;
   background-color: #fff;
   border-radius: 4px 0 0 0;
   border: solid 2px #ccc;
   min-height: 500px;
   height: auto;
   width: 100%; 
}

我在这个视图中有一个webgrid.不幸的是,#maindiv它不会扩展以容纳其内容(webgrid).如何调整div的属性以始终扩展以涵盖其所有内容？

编辑:
我有两个内部div结构

<div id="maindiv">
   <div class="container">
      <div id="inner1">
        <!-- my webgrid is contained here -->
      </div>
   <div id="inner2>
</div>

另一个css如下:

.container{
   height: 100%;
   width: 100%;
}

#inner1 {
   height: 100%;
   width: 700px;
   float: left;
   border: 2px solid #000;
}

#inner2 {
   height: 100%;
   width: 200px;
   float: right;
   margin-right: 90px;
}

Answer 1

漂浮后你没有清理.浏览器将浮动元素视为零高度,这就是为什么父级不扩展以适应它们的原因.

要解决此问题,请clear: both;在#inner2之后添加一个空div 或向.container添加一个clearfix.后者的优点是不会使用非语义标签混淆你的html,并且可以像这样实现.

.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;  
}