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之后添加一个带clear: both;的空div或向.container添加一个clearfix。后者的优点是不会使用非语义标签混淆你的html，并且可以像这样实现。

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

表格Div高度随内容扩展

1 个答案: