Source on Github

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:

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

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"


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


view source

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.