How do I anchor my footer but keep my content height 100%

I was working with sticky footer, but it wasn't working out as it should and was giving something like 200 or 400 px of extension past the viewport.

I thought it would be easier to show what I need rather than explain it, see below:

enter image description here

EDIT: I updated my code to reflect what it looks like with sticky footer.

Sticky Footer jsFiddle

ORIGINAL And here is my code:

<div id="wrapper">
  <header>
    Header
  </header>

  <div id="container">
    <div id="content">
      Content
    </div>

    <div id="sidebar">
      Sidebar
    </div>
  </div>

  <footer>
    Footer
  </footer>
</div>

Also noticed that I have a sidebar in the code but not in the picture provided. I will need a sidebar as well without a background.

Solution

You did not follow the tutorial or I'd see an empty div with class push in your wrapper. Also, footer should not be inside your wrapper.

As per the online tutorial...

<body>
        <div class="wrapper">
            <header>
                Header
            </header>
            <div id="container">
                <div id="content">
                    Content
                </div>
                <div id="sidebar">
                    Sidebar
                </div>
            </div>
            <div class="push"></div>
        </div>

        <footer>
            <p>Copyright (c) 2008</p>
        </footer>
</body>

The CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
   height: 142px; /* .push must be the same height as footer */
}

jsFiddle Demo Page

Please try the above and post your actual CSS.