Question

我在这里看过很多关于同样问题的帖子，但我找不到我的问题的相关解决方案......

我当前的分辨率是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');
}

Answer 1

我注意到一些破坏你布局的事情。

一个是元素的总宽度。您将宽度设置为适合#mainwrap，但也设置了填充。填充被添加到元素的总宽度，因此您的#mainarea_wrap而不是600px，实际上是640px宽（每侧+ 20px的填充）。由于两个元素超出了800px的包装宽度，因此它打破了布局。

另一个是您用来移动元素的相对位置。我认为定位元素的更有效方法是使用浮点数。如果您向左移动#menuwrap，向右移动#mainarea_wrap并使用更正后的宽度，它们将很好地放在您的#mainwrap中。

如果您使用此技术，则可以在clear:both;上使用#footer，以确保它始终显示在这两个元素下方。

这是一个精简的jsfiddle，显示我在说什么：http://jsfiddle.net/9XWAL/

（忽略花哨的颜色！我只是快速设置它们以供视觉参考）。

希望这有帮助！祝你好运！

Answer 2

我不知道你是否已经解决这个问题，但这就是我解决类似问题的方法。

我的页脚不断重叠我的内容。基本结构如下：

body
div id=page_container
div id=bodywrap
content
/div
/div
div id=footer
/div

看起来效果很好，但是当我收缩窗口（或打开开发工具）时，底部会与页脚的大小重叠。

所以我在bodywrap

之后在页面容器的末尾粘贴了一个名为footpad的div

body
div id=page_container
div id=bodywrap
content
/div
div id=footpad
/div
/div
div id=footer
/div

并修改了css如下：

28 #page_container {
29         position:relative;
30         width:960px;
31         background-color:#ffffff;
32         margin:0 auto;
33         text-align:left;
34         height:auto !important;
35         height:100%;
36         min-height:100%;
37 }

97 #footer {
98         background-color: #DFE1E1;
99         color:#949595;
100         position:relative;
101         margin-top:-151px;
102         padding:15px;
103         width:100%;
104         clear:both;
105 }

151 #footpad {
152         width:100%;
153         height:151px;
154         position:relative;
155 }

现在效果很好。

Answer 3

您在徽标下方提供的空间小于页脚的高度，因此滚动时页脚必须与徽标重叠。它适用于某些分辨率的原因是因为25％的高度不同。相反，你需要的是页脚上的固定高度，如THIS

防止页脚重叠

3 个答案: