CSS Sticky Footer Margin

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

}

<div id="wrapper">

  <div id="content">

    <span>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).</span>

  </div>

  <div id="push"></div>

</div>

<div id="footer">

  <a href=""><span>About Us</span></a>

  <span> | </span>

  <a href=""><span>Contact Us</span></a>

  <span> | </span>

  <a href=""><span>Home</span></a>

</div>

CSS Sticky Footer with Margin-Top

The solution was simpler than I thought. Just increase the value of padding-bottom of my #body div.

CSS sticky footer with margin-top on main wrapper

If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.

HTML

<div class="wrapper">
    <div class="content">
        ... Your Content Here ...
    </div>
</div>
<div class="footer">
    ... Your Footer Here ...
</div>

CSS

.wrapper {
    background: #eee;
    padding: 15px 0 100px;
}

.content {
    background: #fff;
}

.footer {
    background: #ccc;
    bottom: 0;
    height: 100px;
    left: 0;
    position: fixed;
    right: 0;
}

That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)

Sticky footer margin issue

Delete the * CSS and change the HTML one to:

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

.footer * {
    margin: 0;
}

CSS Sticky Footer - With Margin

Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):

http://jsfiddle.net/jrZKb/1/

<body>
    <header> Header</header>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
header
{
    background-color: green;
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-color: blue;
}

Sticking footer to bottom of page using flexbox and margin-top: auto; not working

In your CodePen, the empty gap below the footer is taken up by the padding: 700px on .testimonial-text. Removing it (or lowering it to a reasonable value) fixes the issue.

sticky footer bottom margin with conditional fixed position bottom nav bar

Setting height: 100% on html and body (as opposed to min-height) prevents the document height from exceeding the viewport height, so your additional content is overflowing scrollable area.

You could ~~remove body from the 100%, leaving it on html, or~~ add overflow: auto to the html/body rule so that the body element can scroll (as opposed to scrolling the window).

Edit: removing 100% height from body allows the footer to move off the bottom of the window. Updated accordingly.

html, body {
  /* IE 10-11 didn't like using min-height */
  height: 100%;
  overflow: auto;
}

You also have a typo in your .conditionalNav rule:

hight:25px;

CSS Sticky Footer Margin