<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 "compass/reset.scss";
@import "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 compass/reset.scss
@import 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,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,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:#999;height:72px}#footer{background:#ccc}.example{height:500px;border:3px solid red}.example p{margin:1em 0.5em}