How to stop Sticky Footer from covering content...?

Asked 26/4, 2013 at 20:37 Answered 17/8, 2021 at 0:17

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>

Paste answered 26/4, 2013 at 20:37 Comment(3)

it would help if you could put the html source of your page :) – Elvieelvin 26/4, 2013 at 20:55

@Elvieelvin Updated! Hope that helps. – Paste 26/4, 2013 at 20:58

Also, there's nothing outside the <body> other than the <head>. – Paste 26/4, 2013 at 21:8

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!

Elvieelvin answered 26/4, 2013 at 21:25 Comment(1)

It is worked for cases where the footer height is fixed, what about when the footer height is fit-content? How to define the margin-bottom units? – Gangling 13/3 at 2:19

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.

Womankind answered 26/4, 2013 at 20:51 Comment(1)

The page structure is written like that, but the margin-bottom: property doesn't do anything. – Paste 26/4, 2013 at 20:54

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.

Parturifacient answered 1/12, 2013 at 21:43 Comment(0)

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 */
}

Fianna answered 17/8, 2021 at 0:17 Comment(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.

Sapajou answered 1/3, 2018 at 21:59 Comment(0)

Recommended topics

Hot tags