--- 
title: Compass Sticky Footer
crumb: Sticky Footer
framework: compass
stylesheet: compass/layout/_sticky-footer.scss
layout: core
classnames:
  - reference
  - core
  - layout
---
- render 'reference' do
  :markdown
    This module provides tools needed to lay out your footer such
    that it sticks to the bottom of the page.

    Mix in to the top level of your stylesheet, so the footer stays
    at the bottom of the screen. This mixin relies on the following
    HTML structure, and a fixed-height `#footer` element:

        <body>
          <div id="root">
            <div id="root_footer"></div>
          </div>
          <div id="footer">
            Footer content goes here.
          </div>
        </body>

    If you use the default selectors, this mixin is simple to use.
    Just mix it into the top level of your stylesheet:
    
        @include sticky-footer(54px)

    You can also define the selectors yourself:

        @include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")