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
<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:
You can also define the selectors yourself:
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")
This file can be imported using:
- Compass Sticky Footer Example
- How to use the sticky footer mixin.
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.