Question

'page'div有三个div。 'headerdiv'，'contentall'和'footerdiv'。 'contentall'和'footerdiv'重叠。

即使我将'top：100px'添加到'footerdiv'，它仍然无济于事。请帮忙。

我是论坛新手，无法发布css代码（仍需要了解如何在此处发布代码）。

有问题的示例页面：http://spdyt.com/yahoo-seo/

我检查了之前的讨论，但无法弄明白。请帮忙。

Answer 1

如果'contentall'浮动或包含浮动元素，则会导致div失去其高度。

可能的解决方案：

Add 'clear:both' to 'footerdiv' =＆gt;不建议。 'contentall'仍然没有高度）
Add an empty div just before you close 'contentall' and add 'clear:both' to that new div =＆gt;不建议。弄乱你的代码）
Add class 'clearfix' to the 'contentall' div =＆gt;但在此之前，您需要实现clearfix class =＆gt; http://www.webtoolkit.info/css-clearfix.html |推荐

我希望这有帮助，祝你好运。

Answer 2

问题不是你的页脚，问题的内容。如果您只删除position:relative;，则可以看到它。不可思议的是，标题与内容重叠，因为它没有正确清除。我建议在headerdiv中添加一个空的clear:both;。它比使用breadcrumbs div更干净。

像这样：

HTML：

<div id="headerdiv">
     <div id="mastheaddiv">
     <div id="headext">
     <div id="breadnsearch">
     <div style="clear:both;height:1px;width:100%;"></div>
</div>
<div id="contentall"></div>
<div id="footerdiv"></div>

CSS：

#mastheaddiv {
    float: left;
    width: 79%;
}


#headext {
    color: white;
    float: right;
    height: 100%;
    margin-top: 9px;
    width: 20%;
}


#breadnsearch {
    float: left;
    height: auto;
    width: 100%;
}

#contentall {
    display: block;
    height: auto;
    width: 100%;
}

只是一个建议：首先，我建议总是定义div的宽度和高度。根据我的经验，你会遇到更少的问题。

在CSS内容div中与页脚重叠

2 个答案: