Avoid the weird feeling people get and the weird look they give you when they see your footer in the middle of their browser window with only unsettling emptiness beneath.
This one takes some commitment — but nothing you can't handle:
- Your sticky footer must have a fixed height. If that's not what you need, check out
- Your stuff-above-the-footer must be wrapped in a wrapper element. (The footer itself remains outside of this wrapper.)
So the wrapper and footer are siblings. Something like this:
<body> <div class="wrapper"> <!-- your page's content --> </div> <footer class="scut-sticky"> <!-- your footer's content --> </footer> </body>
This mixin should not be invoked within a declaration block — i.e. don't nest it. The mixin needs to add rules for a number of elements —
body, the wrapper, and the footer — so it can't be restricted to the context of a different selector.
Since an example of this utility requires its own
<body> elements, this example is relegated to Codepen.
Note: For now at least, this mixin can also be called with the deprecated use-name