Prevent footer from overlapping_问答_开发者_运维开发者技术经验分享

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:#D8D8D开发者_StackOverflow8;
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!

I don't know if you've got this settled or not, but here's how I solved a similar problem.

My footer kept overlapping my content. The basic structure is as follows:

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

It looked great maximized, but when I shrunk the window (or hit the developer tools) the bottom would overlap to the size of the footer.

So I stuck a div called footpad at the end of the page container, after the bodywrap

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

and modified the css as follows:

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 }

And now it works beautifully.

The space you have provided underneath the logo is smaller than the height of the footer so the footer has to overlap the logo when scrolled. The reason it works on some resolutions is because the height of 25% varies. Instead what you need is a fixed height on the footer like THIS