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 接受扩展到其中的内容。

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

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