<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/docs/examples/compass/layout/compass/reset.scss";
@import "https://compass-style.org/files/docs/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/docs/examples/compass/layout/compass/reset.scss
@import https://compass-style.org/files/docs/examples/compass/layout/compass/layout.scss
+sticky-footer(72px, "#layout", "#layout_footer", "#footer")
#header
  :background #999
  :height 72px
#footer
  :background #ccc
.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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
q, blockquote {
  quotes: "" "";
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
}
a img {
  border: none;
}
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;
}