CSS Sticky Footer Margin

Question

I do NOT want a FIXED footer, I need a STICKY footer.

My sticky footer worked fine at first but when the content is at a certain height, there is a

Answer 1

Just add position: fixed; to your footer class in your css:

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    clear:both;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: fixed; /*add this new property*/
}

-----UPDATE-----

If you need a footer that stays at the bottom you need two things:

#wrapper {
    /*height:100%;*/   /*you need to comment this height*/
    margin:0 auto;
    min-height:100%;
    padding-bottom:-30px;
    width:985px;
    position: relative;  /*and you need to add this */
}

#footer {
    background:#000;
    border-top:1px solid #00F0FF;
    height:30px;
    margin-top:-30px;
    padding:5px 0;
    width:100%;
    position: relative;  /*use relative position*/
}

#wrapper {
  /*height:100%;*/   /*you need to comment this height*/
  margin: 0 auto;
  min-height: 100%;
  min-height: 700px;  /* only for Demo purposes */
  padding-bottom: -30px;
  width: 985px;
  position: relative;  /*and you need to add this */
}
#footer {
  background: #000;
  border-top: 1px solid #00F0FF;
  height: 30px;
  margin-top: -30px;
  padding: 5px 0;
  width: 100%;
  position: relative;  /*use relative position*/
}

  

    The footer leaves extra space at the bottom when you scroll all the way down. It starts out at the bottom for only the "Above the Fold" section (before scrolling it's at the bottom).
  
  



  About Us
   | 
  Contact Us
   | 
  Home