父div的高度为零，即使它具有有限高度的孩子 [英] Height of parent div is zero even if it has child with finite heights

问题描述

我有一个网站的布局已在图中显示。该主体由主容器组成，其包括头，父div 和 footer 。 parent div 还包含多个子div ，如图所示。

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

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

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

$ b

解决方案

如果你有一个案例为< a href =http://www.webtoolkit.info/css-clearfix.html> clearfix class 。

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

但是添加类'clearfix'（当然你需要在你的样式表中有它），它将在末尾添加一个'。'（当然不可见），你的父级将神奇地具有正确的高度。

注意，它的跨平台，兼容IE6 +，Chrome，Safari，Firefox，你可以命名！

 code> .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％; 
} 
  

I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent div and footer. The parent div further contains several child div as shown.

The problem being height of all the child div is finite. But the parent div contains 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.

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.

Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.

Please comment if I am unclear in asking my doubt !

解决方案

Seems like you got a case for the clearfix class.

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.

But adding the class 'clearfix' (of course you need to have it in your stylesheet) it will add a '.' at the end (invisible of course) and your parent will magically have the correct height.

Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!

.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%;
}

这篇关于父div的高度为零，即使它具有有限高度的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！