Compass Sticky Footer

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")

This file can be imported using: @import "compass/layout/sticky-footer"

Examples

Compass Sticky Footer Example: How to use the sticky footer mixin.

Mixins

view source

=sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer"))
  html, body
    height: 100%
  #{$root-selector}
    clear: both
    min-height: 100%
    height: auto !important
    height: 100%
    margin-bottom: -$footer-height
    #{$root-footer-selector}
      height: $footer-height
  #{$footer-selector}
    clear: both
    position: relative
    height: $footer-height

@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
  html, body {
    height: 100%;
  }
  #{$root-selector} {
    clear: both;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    #{$root-footer-selector} {
      height: $footer-height;
    }
  }
  #{$footer-selector} {
    clear: both;
    position: relative;
    height: $footer-height;
  }
}

Based on a blog post by Ryan Fait.

Must be mixed into the top level of your stylesheet.

Footer element must be outside of root wrapper element.

Footer must be a fixed height.

Compass Sticky Footer

Examples

Mixins

sticky-footer($footer-height, $root-selector, $root-footer-selector, $footer-selector)