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

我有一个网站，其布局显示在图中。该机构由main container组成，其包括header,parent div和footer。如图所示，parent div还包含若干个child div。父母div的高度为零，即使它有有限高度的孩子

Webpage Layout

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

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

任何人都可以建议我一些方法，以便父div的高度根据存在的子div的高度自动更改。

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

来源

2012-09-22 Prashant Singh

请给我们您当前的CSS。另外，我猜对了，你的孩子div使用'float：etc'？ – Daedalus

添加溢出：隐藏;给父母。 – Tom

好像你有一个案例clearfix class。

所以我猜你是浮动的小孩div，这就是为什么父div的高度为0. 当你使用浮动，父母不适应孩子的高度。

但添加class'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-22 04:04:52

尝试添加以下到您的样式表：

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

如代达罗斯在他的评论暗示，你可能漂浮在孩子的div。如果是这样，上面的行修复它。

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

上面的代码创建一个（伪）元素并将其插入到#parentdiv中，该元素被推下所有浮动div。然后，父div虽然忽略浮动的子元素，但并不忽略这个伪元素 - 按照它应该的方式进行操作，它会展开以包含伪元素。现在，由于伪元素低于所有浮动子元素，所以父元素发生，或者更好，似乎也“包含”浮动的子元素 - 这真的是你想要的。

来源

2012-09-22 04:01:16 banzomaikaka

与其他答案结合后，你的回答和解释非常明确 – Dinesh

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

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

回答

相关问题