1

私はこのようないくつかの内部divを持つ外部divを持っています：

HTML：

<div class="clearfix bigBox">
   <div class="bigBoxBody">
      <div class="containerWithHeaderContent">
      </div>
   </div>
</div>

CSS：

#content .bigBox {
    padding-bottom: 9px;
    width: 100%;
}
#content .containerWithHeader, .containerWithHeaderContent {
    padding: 10px 0;
    width: 100%;
}

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

私の問題は、内側のdiv（bigBoxBody）が外側のdiv（）の高さと一致する高さを取得していないように見えることですbigBox。

スクリーンショット：

（外側のdivは赤で、内側のdivは緑です。） ここに画像の説明を入力してください

これの何が問題なのか、CSSを使用する際に注意が必要なことが他にあるのかわかりません。

jsFiddle： http: //jsfiddle.net/UFFx3/2/

4

2 に答える 2

2

div は、使用可能な垂直方向のスペース全体を自然に占めることはありません。例については、このjsfiddleを参照してください。外側の div には 100 ピクセルの明示的な高さが指定され、内側の div には高さがまったく指定されていません。したがって、内側の div は、そのコンテンツを表示するために必要なスペースのみを占有します。

HTML:

<div class="outer">
   <div class="inner">
       <p>Content here!</p>       
   </div>
</div>​

CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
}

内側の div が使用可能なすべての垂直方向のスペースを占めるようにする場合height:100%は、CSS で設定します。例については、このjsfiddleを参照してください。

新しい CSS:

.outer {
    background: red;
    height: 100px;
}
.inner {
    background: green;
    height: 100%; /* new line */
}

clearfix例に示されていない CSS クラスを使用しているため、問題にこれ以上の詳細があるかどうかはわかりません。問題を解決するために不足しているものが他にある場合はお知らせください。

于 2012-11-17T16:06:42.783 に答える
0

あなたの場合（スクリーンショットから）、内側のdivがその中のコンテンツに拡張されていないようです。したがって、内側の div を外側の div の高さまで拡張するのではなく、内側の div をその中のコンテンツまで拡張することを受け入れます。

overflow:autoしたがって、内側の div を含むように設定し、外側の div の高さの制約を削除して、次のように高さを無限に拡大できるようにすることをお勧めします。

.outer {
    background: red;
}
.inner {
    background: green;
    overflow : auto;
}
于 2013-09-18T07:52:57.513 に答える