3

私は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%; 
}

このビューにはウェブグリッドがあります。残念ながら、は#maindivそのコンテンツ（Webグリッド）に対応するように拡張されていません。divのプロパティを調整して、すべてのコンテンツをカバーするように常に拡張するにはどうすればよいですか？

編集：
私は2つの内部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;
}
4

1 に答える 1

7

フロートの後にクリアしていません。浮動要素はブラウザーからは高さが 0 であると見なされます。そのため、それらの親はそれらに合わせて拡張されません。

この問題を解決するには、#inner2 の後に空の div をclear: both;追加するか、.container に clearfix を追加します。後者には、非セマンティック タグで html を乱雑にしないという利点があり、このように実装できます。

.clearfix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;  
}
于 2013-01-02T16:16:48.637 に答える