<div class='example'>
  <div id='layout'>
    <div id='header'>
      <h1>Sticky Footer Example</h1>
    </div>
    <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='layout_footer'></div>
  </div>
  <div id='footer'>
    This is the footer area.
  </div>
</div>

.example
  #layout
    #header
      %h1 Sticky Footer Example
    %p
      This is the main content area.
    %p
      In this example you should pretend that the red box
      is actually the browser window.
    %p
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    #layout_footer
  #footer
    This is the footer area.

@import "https://compass-style.org/files/beta-sub/examples/compass/layout/compass/reset.scss";
@import "https://compass-style.org/files/beta-sub/examples/compass/layout/compass/layout.scss";
@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
#header {
  background: #999999;
  height: 72px;
}
#footer {
  background: #cccccc;
}
.example {
  height: 500px;
  border: 3px solid red;
  p {
    margin: 1em 0.5em;
  }
}

@import https://compass-style.org/files/beta-sub/examples/compass/layout/compass/reset.scss
@import https://compass-style.org/files/beta-sub/examples/compass/layout/compass/layout.scss
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
#header
  background: #999999
  height: 72px
#footer
  background: #cccccc
.example
  height: 500px
  border: 3px solid red
  p
    margin: 1em 0.5em

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}
a img {
  border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
html, body {
  height: 100%;
}
#layout {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -72px;
}
#layout #layout_footer {
  height: 72px;
}
#footer {
  clear: both;
  position: relative;
  height: 72px;
}
#header {
  background: #999999;
  height: 72px;
}
#footer {
  background: #cccccc;
}
.example {
  height: 500px;
  border: 3px solid red;
}
.example p {
  margin: 1em 0.5em;
}