sticky footer, fluid height
view sourceEnsure that your fluid-height footer stays down at the bottom of the viewport, no matter what.
- use-name
-
scut-sticky-footer-fluid - type
- mixin only
- arguments
-
-
$wrapper- default
-
".wrapper"
-
$footer- default
-
".scut-sticky"
A CSS selector for the footer. Wrap this selector in quotes, too.
-
To implement this mixin you'll need the following a full-page wrapper element, with the footer inside of it. That's it.
The footer is the wrapper's child, like so:
<body>
<div class="wrapper">
<!-- your page's content -->
<footer class="scut-sticky">
<!-- your footer's content -->
</footer>
</div>
</body>
Then your footer should stick to the bottom of the page, regardless of the height of the content above it or its own height. (If you have a fixed-height footer, you could try scut-sticky-footer-fixed).
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 — html, 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 <html> and <body> elements, this example is relegated to Codepen.
A CSS selector for the page-wrapper element. Wrap your selector in quotes.