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

Question

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

当mainContent div的内容为“更高”然后是左侧菜单时，一切正常 - 但是当mainContent较小时，它看起来像这样：

通过Firefox WebDevelopper插件可以看到div顺序。 .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;
}

我可以请求修复此布局的一些指导吗？我想实现类似的东西：

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

如果有任何帮助，我将不胜感激。

Answer 1

我不知道你的html是什么样的，但看起来你可以尝试在页脚之前插入一个清除div ...顺便说一下，为什么'clear：both;'在页脚css规则中注释？

在页脚div之前插入的代码：

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

不肯定是否会有所帮助，但如果我理解你的问题是正确的，这是我最好的猜测！

Answer 2

尝试将pageBody更改为：

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