CSS 父 div 的高度为零，即使它的子节点高度有限
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12540436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Height of parent div is zero even if it has child with finite heights
提问by Prashant Singh
I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent divand footer. The parent divfurther contains several child divas shown.
我有一个网站，其布局已在图中显示。主体由 a 组成main container，其中包括header、parent div和footer。所述parent div进一步包含若干child div如图所示。
The problem being height of all the child divis finite. But the parent divcontains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.
问题是所有的高度child div是有限的。但是parent div除了子div之外什么都不包含。所有子 div 都是可见的，但父 div 的高度显示为零。我也没有通过提供一些预先指定的值来固定父 div 的高度，因为如果将来孩子的数量增加，它可能会导致错误。
The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for.
由于父 div 的大小为零导致的问题是我的页脚 div 上升并与父 div 的内容发生冲突。这可以通过提供合适的边距顶部来解决，但这不是我正在寻找的解决方案。
Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.
任何人都可以建议我某种方式，以便父 div 的高度根据存在的子 div 的高度自动变化。
Please comment if I am unclear in asking my doubt !
如果我在提问时不清楚，请发表评论！
回答by VVV
Seems like you got a case for the clearfix class.
好像你有一个clearfix 类的案例。
So I'm guessing you're floating the child div and that's why the parent div's height is 0. When you use floats, the parent doesn't adapt to the height of the children.
所以我猜你正在浮动子 div，这就是为什么父 div 的高度为 0。当你使用浮动时，父不适应孩子的高度。
You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.
您可以将 'clearfix' 类应用于浮动元素的父级（当然您需要在样式表中使用它），它会添加一个不可见的 '.' 在末尾。然后，您的父母将拥有正确的高度。
Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
请注意，它是跨平台的，兼容 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%;
}
回答by banzomaikaka
Try adding the following to your stylesheet:
尝试将以下内容添加到您的样式表中：
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.
正如代达罗斯在他的评论中所建议的那样，您可能正在浮动子 div。如果是这样，上面的行修复它。
The problem when you float things is that their parent element "ignores" them.
当你浮动东西时的问题是它们的父元素“忽略”它们。
The line above creates and inserts a (pseudo-)element into the #parentdiv which is pushed down past all of the floated divs. Then the parent div, which although ignores the floated children, doesn't ignore this pseudo element - acting as it should, it expands to contain the pseudo element. Now, since the pseudo-element is below all of the floated children, the parent div happens, or better yet, seems to "contain" the floated children as well - which is really what you want.
上面的行创建并插入一个（伪）元素到 #parentdiv 中，该元素被向下推过所有浮动的 div。然后父 div，尽管忽略了浮动的子元素，但不会忽略这个伪元素 - 就像它应该的那样，它扩展以包含伪元素。现在，由于伪元素在所有浮动子元素之下，父 div 发生，或者更好的是，似乎也“包含”浮动子元素——这正是你想要的。
