防止页脚重叠 [英] Prevent footer from overlapping
问题描述
我在这里阅读了很多关于同一问题的帖子，但我找不到
a相关的解决方案我的问题....
我的当前分辨率为 1440x900 ，网站表现良好，这意味着页脚停在我的menuwrap下方。
提前感谢！
我的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; $ b $ d 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; / *旧浏览器* /
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;
/ *对于IE 8 * /
-ms-filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 135，Color ='＃000000'）;
/ *对于IE 5.5 - 7 * /
filter：progid：DXImageTransform.Microsoft.Shadow（Strength = 4，Direction = 135，Color ='＃000000'）;
}
正在破坏您的布局。
一个是元素的总宽度。你的宽度设置为适合你的 #mainwrap ，但也设置了填充。填充被添加到元素的总宽度，所以你的 #mainarea_wrap 而不是600px，实际上是640px宽（每边+20px填充）。由于两个元素超出了包装器宽度800px，因此破坏了布局。
另一个是你用来移动元素的相对位置。我认为一个更有效的方式来定位你的元素将是浮动。如果你把 #menuwrap 浮动到左边，你的 #mainarea_wrap 坐在你的 #mainwrap 。
如果您使用此技术，您可以在 #footer上使用 clear：both;
（忽略大胆的颜色！我只是快速设置它们以供视觉参考）。
希望有帮助！祝你好运！
I have read numerous posts here regarding this same issue, however I couldn't find a relevant solution to my problem....
My current resolution is 1440x900 and the site behaves well, meaning that the footer stops right below my menuwrap.
When I change resolution, the footer overlaps it when I scroll all the way down.
Thanks in advance!
My HTML is:
<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>
My CSS is:
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');
}
I noticed a few things that were breaking your layout.
One was the total width of your elements. You had the widths set to fit within your #mainwrap, but also had set padding on them. The padding was being added to the total width of the elements, so your #mainarea_wrap instead of being 600px, was actually 640px wide (+20px of padding on each side). Since the wrapper width of 800px was exceeded by your two elements, it broke the layout.
Another was the relative positioning you were using to move your elements around. I think a more effective way to position your elements would be with floats. If you float the #menuwrap to the left, and your #mainarea_wrap to the right with the corrected widths, they will sit nicely in your #mainwrap.
If you use this technique you can use clear:both; on your #footer to make sure it will always show up beneath those two elements.
Here's a stripped down jsfiddle showing what I'm talking about: http://jsfiddle.net/9XWAL/
(Ignore the garish colors! I just set them quickly for visual reference).
Hopefully that helps! Good luck!
这篇关于防止页脚重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
