Stick Footer to Bottom of Page without (unnecessary) scroll bars

Question

EDIT 2:

There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:

<div id="footer">
 <div id="copyright-bg" class="container">
  <div class="row">
   <div class="twelvecol">
    <p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>

I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.

Note: I have tested in Chrome and Firefox.

EDIT:

I have attempted to use the CSS Sticky Footer per instructions on the website.

I assume there is a conflict in my CSS(?) here is a Fiddle of the page.

I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.

Original Question

I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.

Here is a screenshot:

Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.

I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.

How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses jQuery/Javascript)

CODE:

HTML:

<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
    <p class="copyright-text">Ipsum</p>
</div>
</div>
</div> 

CSS:

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
    margin: 0;
    padding: 0;
    text-align: justify;
    background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
    /* Vendor Specific Background Gradients... */
}

#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
    border-top: 5px solid #E31836;
padding:1.250em;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
}

.row {
    width: 100%;
    max-width: 1140px;
    min-width: 755px;
    margin: 0 auto;
    overflow: hidden;
 }

.row .twelvecol {
    width: 100%;
    float: left;
 }

Answer 1

If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.

EDIT:

I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:

* {margin:0;padding:0;} 
html, body {height: 100%;}

#content-wrap {min-height: 100%;}

Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.

After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:

#main {overflow:auto;
    padding-bottom: 100px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear:both;} 

You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!

Answer 2

Majority of the sticky footer codes seem to cause issues with my page. To work around this issue I am using the following code:

HTML

<body>
 <div id="page-content">
   <header> 
     <!-- Header Content Goes Here --> 
   </header> 

     <!-- Page Content Goes Here --> 

   <footer>
     <!-- Footer Content Goes Here --> 
   </footer>

 </div>
</body>

JS

$(function() {
   var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
 $("#page-content").css("min-height",height+"px");
});

What this does is calculate the height of the page and set a minimum height for the page, thus sticking the footer to the bottom. It works beautifully.

Note: I am using HTML5.