内部Div没有得到父div高度

Question

我有一个带有几个内部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/

Answer 1

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占用所有可用的垂直空间，请在CSS中设置height:100%。有关示例，请参阅此jsfiddle。

新CSS：

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

我不确定您的问题是否有更多细节，因为您正在使用示例中未显示的clearfix CSS类。如果你有什么不足以解决你的问题，请告诉我。

Answer 2

在你的情况下（从屏幕截图）看来内部div没有扩展到它内部的内容。因此，它不是将内部div扩展到外部div的高度而是使内部div接受扩展到其内部的内容的情况。

因此我建议您尝试将内部div设置为包含overflow:auto并删除外部div上的高度约束以允许高度无限增长，如下所示

.outer {
    background: red;
}
.inner {
    background: green;
    overflow : auto;
}