Html 内部Div未获取父Div高度

我有一个外部div和几个内部div，如下所示：

HTML:

我的问题是内部div（

bigBoxBody

）的高度似乎与外部div（

bigBox

）的高度不一致

屏幕截图：

（外分区为红色，内分区为绿色。）

我不确定这有什么问题，或者是否有任何其他事情需要注意使用CSS

---

jsidle:

div不会自然地占据它们可用的全部垂直空间。看看这个例子。外部div的显式高度为100像素，而内部div根本没有指定高度。因此，内部div只占用显示其内容所需的空间

HTML:

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

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

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

​ 如果希望内部div占用所有可用的垂直空间，请在CSS中设置

height:100%

。看看这个例子

新CSS:

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

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

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

在使用示例中未显示的

clearfix

CSS类时，我不确定您的问题是否有更多的细节。如果您还缺少其他解决问题的方法，请告诉我。

在您的情况下（从屏幕截图），内部div似乎没有扩展到内部内容。因此，它不是让内部div扩展到外部div的高度，而是让内部div接受扩展到内部内容

因此，我建议您尝试将内部div设置为包含

溢出：auto

，并删除外部div上的高度约束，以允许高度无限增长，如下所示

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

---

我不明白你在问什么？。你能解释一下吗。@bharathi:我担心我的问题没有意义。我的问题是内部div似乎被放置在父div之外。我将尝试添加一个屏幕截图。@Brian:

display:block

哪个div？内部div应该有它。你可以使用这是一件我不喜欢css的事情，就是heights函数的方式，尤其是在百分比方面。理论上，你应该能够在一页上有一个div，给它一个100%的高度，让它填充整个页面，而不必用一个设定的高度将另一个div环绕……你是否尝试过将

height:100%

设置为内部div？看起来绿色div自动调整大小以适应书名，但由于以某种方式浮动，它变得混乱。我需要查看整个页面的实际代码内容，以了解出了什么问题。@AndersHolmström：是的，我尝试了100%的高度，下面是一个示例exmaple Remove

padding bottom:9px来自
#content.bigBox
，它覆盖了整个父项。看到这个：@AndersHolmström:这在我的网页中很奇怪，即使去掉了
底部的填充物