sticky footer, fluid height

view source

Ensure that your fluid-height footer stays down at the bottom of the viewport, no matter what.

mixin only
  1. $wrapper

    A CSS selector for the page-wrapper element. Wrap your selector in quotes.

  2. $footer

    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:

  <div class="wrapper">
    <!-- your page's content -->
    <footer class="scut-sticky">
      <!-- your footer's content -->

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.