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

Posted 2023-02-19

【中文标题】父 div 的高度为零，即使它有有限高度的孩子

【英文标题】：Height of parent div is zero even if it has child with finite heights

【发布时间】：2012-09-14 11:03:51

【问题描述】：

我有一个网站，其布局如图所示。主体由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 的高度自动改变。

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

【问题讨论】：

请给我们您当前的 css。另外，我猜你的孩子 div 使用 float: etc 是否正确？

添加溢出：隐藏；给父母。

【参考方案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%;

【讨论】：

将“clearfix”类添加到父元素，而不是子元素。

【参考方案2】：

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

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

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

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

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

【讨论】：

结合其他答案后，你的回答和解释就很清楚了

这应该是正确的答案。更加清晰简洁。