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

Question

我有一个网站,其布局已在图表中显示.所述主体包括一个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的高度自动改变.

如果我不清楚我的疑问,请发表评论!

Answer 1

好像你有一个clearfix类的案例.

所以我猜你是漂浮了孩子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%;
}

Answer 2

尝试将以下内容添加到样式表中:

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

正如代达罗斯在评论中所说,你可能会漂浮孩子们.如果是这样,上面的行修复它.

浮动事物时的问题是它们的父元素"忽略"它们.

上面的行创建并在#parentdiv中插入一个(伪)元素,该元素被向下推过所有浮动的div.然后,父div虽然忽略了浮动的子节点,但它不会忽略这个伪元素 - 按照它应该的行为,它会扩展为包含伪元素.现在,由于伪元素低于所有浮动的子元素,所以父div发生,或者更好,似乎也"包含"浮动的子元素 - 这正是你想要的.