Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class='example'>
  <div id='wrapper'>
    <header>
      <h1>Sticky Footer Example</h1>
    </header>
    <p>
      This is the main content area.
    </p>
    <p>
      In this example you should pretend that the red box
      is actually the browser window.
    </p>
    <p>
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    </p>
    <div id='footer_push'></div>
  </div>
  <footer>
    This is the footer area.
  </footer>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

@import "compass/layout/sticky-footer";

@include sticky-footer(50px, "#wrapper", "#footer_push", "footer");

header {
  background: #999999;
  height: 72px;
}

footer {
  background: #cccccc;
}

.example {
  height: 700px;
  p {
    margin: 1em 0.5em;
  }
}

SassMeister-output.css

html, body {
  height: 100%;
}

#wrapper {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -50px;
}
#wrapper #footer_push {
  height: 50px;
}

footer {
  clear: both;
  position: relative;
  height: 50px;
}

header {
  background: #999999;
  height: 72px;
}

footer {
  background: #cccccc;
}

.example {
  height: 700px;
}
.example p {
  margin: 1em 0.5em;
}

SassMeister-rendered.html

<div class='example'>
  <div id='wrapper'>
    <header>
      <h1>Sticky Footer Example</h1>
    </header>
    <p>
      This is the main content area.
    </p>
    <p>
      In this example you should pretend that the red box
      is actually the browser window.
    </p>
    <p>
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    </p>
    <div id='footer_push'></div>
  </div>
  <footer>
    This is the footer area.
  </footer>
</div>