css - 表单 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

你不是在花车之后清理。浏览器认为浮动元素的高度为零，这就是为什么它们的父元素没有扩展以适应它们的原因。

要解决此问题，请在 #inner2 之后添加一个空 divclear: both;或将 clearfix 添加到 .container。后者的优点是不会用非语义标签弄乱你的 html，并且可以像这样实现。

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