CSS布局 - 页脚重叠页面的内容
问题描述:
我是CSS新手,我在网上找到了一个布局,但我在定制它时遇到了一些问题。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格下面。
我将不胜感激任何帮助。
答
我不知道你的html是什么样子,但它看起来像你可以尝试在页脚之前插入一个清除div ...顺便说一句,为什么'明确:两者'在页脚css规则中注释掉了?
代码只是页脚DIV前插入:
<div style="clear: both;"/>
不敢肯定它是否会有所帮助,但如果我理解您的问题correcty,这是我最好的猜测!
答
尝试改变pageBody
到:
#pageBody {
float: left;
clear: both;
}
我忽略了这一个,谢谢 - 我不知道为什么明确:两者;被评论但有帮助。 – zeroDivisible 2009-08-05 09:08:02