| 29 | Sticking a Footer to a Window |
Sticky footers are, as the name suggests, footers that stick to the bottom of your browser. They’re such a hassle to design in CSS. But in Compass there’s a built-in mixin that allows you to make a sticky footer very simply.[12] All you need to define is the height (measured from the bottom of the page) at which the sticky footer floats.
There are three predefined selectors that we apply in this mixin: root, root_footer, and footer. We chose these three because they’ve already been built into Compass. You can see how we use them on the opposite page.
But hey, if you desperately want to use your own selector names, you can! For example, you can change the first ID, root, to a_root in the HTML. In your style sheet, specify this change by typing "#a_root" after you’ve defined the height of your footer in the @include function.
| What To Do... |
- Use sticky footers in the style sheet.
@import "compass/layout/sticky-footer"Then using it is just a matter of this:
@include sticky-footer(24px)
- The built-in HTML for sticky footers is this.
compass/sticky_footer.html <body> <div id="root"> <div id="root_footer"></div> </div> <div id="footer"> This is my footer! </div> </body>
- Customize your sticky footer selectors.
Here’s the HTML:
compass/sticky_footer_custom.html <body> <div id="a_root"> <div id="b_root_footer"></div> </div> <div id="c_footer"> This is my footer! </div> </body>And here it is in use in the style sheet:
@include sticky-footer(24px, "#a_root", "#b_root_footer", "#c_footer")