css - 在与页脚重叠的 CSS 内容 div 中

Question

'page' div 有三个 div。“headerdiv”、“contentall”和“footerdiv”。“contentall”和“footerdiv”是重叠的。

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

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

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

我检查了以前的讨论，但无法弄清楚。请帮忙。

Answer 1

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

可能的解决方案：

1. Add 'clear:both' to 'footerdiv' => 不推荐。'contentall' 仍然没有高度）

2. Add an empty div just before you close 'contentall' and add 'clear:both' to that new div => 不推荐。把你的代码弄得一团糟）

3. Add class 'clearfix' to the 'contentall' div => 但在此之前你需要实现 clearfix 类 => http://www.webtoolkit.info/css-clearfix.html | 推荐的

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

Answer 2

问题不是你的页脚，问题是内容。如果你只删除position:relative;你可以看到它。不幸的是，标题与内容重叠，因为它没有正确清除。我建议clear:both; 在 headerdiv 中添加一个空。它比使用面包屑 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 的宽度和高度。根据我的经验，与此类似的问题会更少。