父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;
} 

正如代达罗斯在评论中所说，你可能会漂浮孩子们。如果是这样，上面的行修复它。

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

上面的行创建并在#parentdiv中插入一个（伪）元素，该元素被向下推过所有浮动的div。然后，父div虽然忽略了浮动的子节点，但它不会忽略这个伪元素 - 按照它应该的行为，它会扩展为包含伪元素。现在，由于伪元素低于所有浮动子元素，所以父div发生，或者更好，似乎也“包含”浮动子元素 - 这实际上就是你想要的。