66

我有一个网站，其布局已在图表中显示。主体由 a 组成，main container其中由和组成。进一步包含几个如图所示。headerparent divfooterparent divchild div

网页布局

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

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

任何人都可以建议我以某种方式使父 div 的高度根据子 div 的高度自动变化。

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

4

2 回答 2

92

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

所以我猜你正在浮动子 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%;
}
于 2012-09-22T04:04:52.920 回答
65

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

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

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

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

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

于 2012-09-22T04:01:16.120 回答