父 div 的高度为零，即使它有有限高度的孩子

Question

我有一个网站，其布局如图所示。主体由main container 组成，它由header、parent div 和footer 组成。 parent div 还包含几个child div，如图所示。

所有child div 的高度问题是有限的。但是parent div 只包含子 div。所有子 div 都是可见的，但父 div 的高度显示为零。我也不是通过提供一些预先指定的值来固定父 div 的高度，因为如果将来孩子的数量增加，它可能会导致错误。

由于父 div 的大小为零导致的问题是我的页脚 div 向上并与父 div 的内容发生冲突。这可以通过提供合适的 margin-top 来解决，但这不是我正在寻找的解决方案。

谁能给我一些建议，让父 div 的高度根据子 div 的高度自动改变。

如果我的疑问不清楚，请发表评论！

Answer 1

好像你有一个clearfix class 的案例。

所以我猜你正在浮动子 div，这就是为什么父 div 的高度为 0。 使用浮动时，父级不会适应子级的高度。

您可以将 'clearfix' 类应用到浮动元素的父级（当然您需要在样式表中包含它），它会添加一个不可见的 '.'在末尾。然后你的父母就会有正确的身高。

注意，它是跨平台的，兼容IE6+、Chrome、Safari、Firefox，随便你！

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Answer 2

尝试将以下内容添加到您的样式表中：

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
} 

正如代达罗斯在他的评论中所建议的那样，您可能正在浮动子 div。如果是这样，上面的行将修复它。

浮动的问题是它们的父元素“忽略”了它们。

上面的行创建了一个（伪）元素并将其插入到#parentdiv 中，该元素被向下推过所有浮动的 div。然后父 div，虽然忽略了浮动的子元素，但并没有忽略这个伪元素——按照它应该的行为，它扩展为包含伪元素。现在，由于伪元素位于所有浮动子元素的下方，因此父 div 发生了，或者更好的是，似乎也“包含”了浮动子元素 - 这正是您想要的。