我有一个网站,其布局已在图表中显示。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的高度自动改变。
如果我在询问我的疑问时不清楚,请发表意见!
发布于 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%;
}
发布于 2012-09-22 12:01:16
尝试将以下内容添加到样式表中:
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
正如Daedalus在他的评论中所建议的,你可能是在浮动孩子的div。如果是这样的话,上面的这行代码就会修复它。
当你浮动对象时,问题是它们的父元素“忽略”它们。
上面的代码行创建一个(伪)元素并将其插入到#parentdiv中,该元素被下推到所有浮动的div之后。那么父div虽然忽略了被浮点子元素,但并没有忽略这个伪元素--按照它应该做的那样,它扩展到包含这个伪元素。现在,由于伪元素位于所有浮点子元素的下面,所以父div发生了,或者更好的是,似乎也“包含”了浮点子元素--这才是您真正想要的。
https://stackoverflow.com/questions/12540436
复制相似问题