How to stop Sticky Footer from covering content…?

问题

I'm using a "sticky" footer, but on a couple of pages it overlays the content. Is there any way to prevent this from happening, but retaining it's "sticky" quality?

I tried using min-height: on HTML and body, but that didn't work.

CSS:

html {
    background: black url(images/bg2.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}
#container {
    min-height: 100%;
    position: relative;
    height: 100%;
    min-width: 900px;
    overflow: hidden;
}
#body {
    padding-bottom: 100px;
    float: left;
    background-color: rgba(0,0,0,0.7);
    width: 750px;
    height: 400px;
}
#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
}

HTML:

<body>

<div id="container">

  <div id="header">
    <div class="logo">C</div>

     <ul class="main_nav">
       <li><a href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="music.html">Music</a></li>
       <li><a href="services.html">Services</a></li>
       <li><a href="gallery.html">Gallery</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
  </div>

  <div id="body">
   <div id="bio_wrapper">

   </div>
  </div>

  <div id="footer">
    <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span>
  </div>

</div>

</body>

回答1:

As amit said, you should put a margin-bottom for your body and use min-height instead of height:

body {
   min-height: 400px;
   margin-bottom: 100px;
   clear: both;
}

And you should remove height:100% from <body>

Hope this helps!

回答2:

If your body div closed before footer div start then use margin-bottom property. Example if the page structure is

<div id="body">
</div>
<div id="footer">
</div>

then write

#body{
   margin-bottom: (height of your footer);
}

If your code structure is not like that. I mean your footer div is inside body div. Then use that margin bottom property to the div which close just before footer div start.

回答3:

Have a look at this solution. You can use absolute positioning for all of your main content elements (header, article, footer). Use @media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.

回答4:

In the last div before the footer just add style="height:100%;padding-bottom:0;" to overwrite the general rules you have some conflict probably with.

来源：https://stackoverflow.com/questions/16244821/how-to-stop-sticky-footer-from-covering-content

标签

html

css

css3

footer

sticky-footer