【问题标题】:Prevent footer from overlapping防止页脚重叠
【发布时间】: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 指令来防止任何重叠?
  • 我试过了……但它不起作用……一旦我改变分辨率,当我向下滚动页面时,页脚与菜单包重叠

标签: css html overlap


【解决方案1】:

我注意到有一些东西破坏了您的布局。

一个是元素的总宽度。您将宽度设置为适合您的#mainwrap,但也设置了填充。内边距被添加到元素的总宽度中,因此您的 #mainarea_wrap 不是 600 像素,实际上是 640 像素宽(每边 + 20 像素的内边距)。由于您的两个元素超过了 800px 的包装器宽度,因此它破坏了布局。

另一个是您用来移动元素的相对位置。我认为定位元素的更有效方法是使用浮动。如果您将#menuwrap 浮动到左侧,将您的#mainarea_wrap 浮动到右侧并调整宽度,它们将很好地位于您的#mainwrap 中。

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

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

(忽略花哨的颜色!我只是快速设置它们以供视觉参考)。

希望对您有所帮助!祝你好运!

【讨论】:

  • 我需要修复我的#Mainwrap,以便在菜单栏始终存在时滚动内容...不过我会尝试使用浮动。
  • 我已经成功实现了置顶页脚。虽然这不是一个糟糕的解决方案,但我希望页脚也向下滚动......
  • 在这种情况下,您可能需要给#mainarea_wrap 一些margin-lovin,例如:margin-left: 200px,仍然保留float: right 以防止它与#menuwrap 重叠
  • 在取消缩放时不起作用。所以它只是一个和其他元素一样的元素。
【解决方案2】:

我不知道你是否解决了这个问题,但这是我解决类似问题的方法。

我的页脚一直与我的内容重叠。基本结构如下:

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

它看起来很棒最大化,但是当我缩小窗口(或点击开发者工具)时,底部会与页脚的大小重叠。

所以我在页面容器的末尾贴了一个叫做footpad的div,在bodywrap之后

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 }

现在效果很好。

【讨论】:

    【解决方案3】:

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

    【讨论】:

    • 我试过了,但页脚粘在页面底部。我希望页脚在您到达底部时显示出来,但要防止它与 #menuwrap 重叠
    • 您可以尝试将页脚的标记移到#mainwrap 之外?就像stickyfooter example。不知道是不是你要找的。​​span>
    • 但页脚不与徽标重叠.. 它只与菜单包重叠.. 我会尝试使用边距.. 就像 Nathan 说的那样
    • 对不起,这就是我的意思。菜单包装下没有足够的空间容纳页脚
    • 就侧面 scolling 而言...我将只使用 overflow-x:hidden... 因为页面是 800x600 我不需要任何人横向滚动 LOL .... 我有一件事但是注意到,当我改变分辨率时,页脚占据了屏幕的大部分,我的#menuwrap 也是如此,为了使它们不重叠,我的页脚必须大幅调整大小,以便 #menuwrap和页脚完全显示在我的页面中...我没有很好地解释...但我也不是英国人或美国人-.-"
    猜你喜欢
    • 2011-02-14
    • 1970-01-01
    • 2012-06-11
    • 2020-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多