父div的高度为零，即使它有有限高度的子div
我有一个网站，其布局已在图表中显示。body由一个main container组成，它由header、parent div和footer组成。parent div还包含几个child div，如下所示。
问题是所有child div的高度都是有限的。但是parent div只包含子div。所有子div都是可见的，但父div的高度显示为零。我也不会通过提供一些预先指定的值来固定父div的高度，因为如果将来子分区的数量增加，可能会导致错误。
由于父div的大小为零而导致的问题是，我的footer div正在上升，并且与父div的内容冲突。这可以通过提供一个合适的页边距顶部来解决，但这不是我正在寻找的解决方案。
有没有人能给我一些建议，让父div的高度随子div的高度自动改变。
如果我在询问我的疑问时不清楚，请发表意见！
回答 2
Stack Overflow用户
发布于 2012-09-22 12:04:53
看起来你有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%;
}Stack Overflow用户
发布于 2012-09-22 12:01:16
尝试将以下内容添加到样式表中：
#parentdiv:after {
content: " ";
display: block;
clear: both;
} 正如Daedalus在他的评论中所建议的，你可能是在浮动孩子的div。如果是这样的话，上面的这行代码就会修复它。
当你浮动对象时，问题是它们的父元素“忽略”它们。
上面的代码行创建一个(伪)元素并将其插入到#parentdiv中，该元素被下推到所有浮动的div之后。那么父div虽然忽略了被浮点子元素，但并没有忽略这个伪元素--按照它应该做的那样，它扩展到包含这个伪元素。现在，由于伪元素位于所有浮点子元素的下面，所以父div发生了，或者更好的是，似乎也“包含”了浮点子元素--这才是您真正想要的。
https://stackoverflow.com/questions/12540436
复制相似问题