24

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>
pianoman
  • 815
  • 2
  • 16
  • 36

5 Answers5

40

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!

janlindso
  • 1,225
  • 3
  • 16
  • 41
LRA
  • 1,057
  • 13
  • 18
9

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.

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
amit ghosh
  • 276
  • 1
  • 4
  • 15
2

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.

Community
  • 1
  • 1
Craig Tullis
  • 9,939
  • 2
  • 21
  • 21
1

This solution is what worked for me.

Follow that link for more explanation and some visuals, but basically, the idea comes down to adding padding to the bottom of the main content that's at least the height of the footer.

HTML:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

CSS:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
mathandy
  • 1,892
  • 25
  • 32
0

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.

negman
  • 1