【发布时间】:2012-07-27 23:07:22
【问题描述】:
我在这里阅读了很多关于同一问题的帖子,但是我找不到 我的问题的相关解决方案....
我当前的分辨率是1440x900 并且网站运行良好,这意味着页脚在我的菜单包正下方停止。
当我更改分辨率时,当我一直向下滚动时,页脚会与它重叠。
提前致谢!
我的 HTML 是:
<body>
<div id="mainwrap">
<div id ="menuwrap">
<a href="index.html"><div id="menulogo"></div></a>
</div>
<div id="mainarea_wrap">
(A LOT OF TEXT-- like 30 lines or so)
</div>
<div id="footer">
</div>
</div>
</body>
我的 CSS 是:
body{
padding:0;
margin:0;
background:url(bg.gif);
background-attachment:fixed;
font-family: Verdana, Arial;
font-size: 0.8em;
}
#mainwrap{
margin-top:30px;
width:800px;
height:600px;
position:relative;
margin-left:auto;
margin-right:auto;
}
#mainarea_wrap{
width:600px;
height:auto;
position:relative;
left:201px;
text-align:justify;
padding:20px;
margin-bottom:-1px;
border-top:solid 1px;
border-right:solid 1px;
border-bottom:solid 1px;
border-color:#D8D8D8;
border-left:solid gray 1px;
border-top-right-radius:10px 10px;
border-bottom-right-radius:10px 10px;
background-color:#F0F0F0;
}
#menuwrap{
height:549px;
width:200px;
position:fixed;
padding-top:20px;
padding-left:20px;
background-color:white;
border:solid 1px;
border-color:#D8D8D8;
border-top-left-radius:10px 10px;
border-bottom-left-radius:10px 10px;
}
#menulogo{
width:200px;
height:150px;
position:relative;
background:url(jmedicas.png) no-repeat;
margin-top:-13px;
margin-left:-20px;
}
#footer{
position:relative;
width:100%;
height:25%;
border:solid 1px;
border-bottom:none;
border-color:#D8D8D8;
padding:20px;
padding-top:0px;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */
border-top-right-radius:10px 10px;
border-top-left-radius:10px 10px;
}
.shadow {
-moz-box-shadow: -5px 4px 8px #000;
-webkit-box-shadow: -5px 4px 8px #000;
box-shadow: -5px 4px 8px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
【问题讨论】:
-
你要改变什么分辨率来“破坏它”?
-
每一个分辨率都低于我正在使用的分辨率。如果我转到更高的位置,页脚就不会到达菜单栏(我的目标是让页脚停在菜单栏的正下方,同时仍然能够看到页脚/页面的底部
-
我在这里遗漏了什么吗?你能不能只在你的页脚中添加一个
margin-top指令来防止任何重叠? -
我试过了……但它不起作用……一旦我改变分辨率,当我向下滚动页面时,页脚与菜单包重叠