CSS布局 - 页脚重叠页面的内容

Question

我是CSS新手，我在网上找到了一个布局，但我在定制它时遇到了一些问题。

当搜索Maincontent div的内容是“高”，然后在左侧菜单中，一切工作正常 - 但是当搜索Maincontent较小，它看起来像这样：

DIV的顺序是可见通过Firefox WebDevelopper插件。 .css文件如下：

body { 
    padding: 0px; 
    margin: 0px; 
    font-family: Arial, Helvetica, sans-serif; 
} 

#container { 
    padding-right: 20px; 
    padding-left: 20px; 
} 

#header { 
} 

#mainMenu { 
    border: 1px solid #808080; 
    font-size: 0.8em; 
} 

#pageBody { 
    position: relative; 
} 

#sidebar { 
    width: 250px; 
    padding: 5px 10px 10px 10px; 
    float: left; 
    border: 1px solid #808080; 
    font-size: 0.8em; 
    margin-top: 5px; 
    margin-right: 10px; 
    min-height: 500px; 
} 

.mainContent { 
    text-align: justify; 
    min-width: 400px; 
    min-height: 500px; 
    margin-left: 285px; 
} 

#footer { 
    font-size: 0.8em; 
    border-top-style: solid; 
    border-top-width: 1px; 
    border-top-color: #CCCCCC; 
    text-align: center; 
    color: #CCCCCC; 
    background-color: #333333; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin: 0; 
    /*clear: both;*/ 
} 

#footer p { 
    margin-top: 0px; 
    margin-bottom: 5px; 
} 

#footer a { 
    color: #CC3300; 
    text-decoration: none; 
} 

#footer a:hover { 
    color: #FF9900; 
} 

请问在修复此布局时可以请求一些指导吗？我想acheive类似于：

确切位置并不重要，我只是想页脚放在pageBody格下面。

我将不胜感激任何帮助。

Answer 1

我不知道你的html是什么样子，但它看起来像你可以尝试在页脚之前插入一个清除div ...顺便说一句，为什么'明确：两者'在页脚css规则中注释掉了？

代码只是页脚DIV前插入：

<div style="clear: both;"/> 

不敢肯定它是否会有所帮助，但如果我理解您的问题correcty，这是我最好的猜测！

Answer 2

尝试改变pageBody到：

#pageBody { 
    float: left; 
    clear: both; 
}