sticky footer, fixed height

view source

Ensure that your fixed-height footer stays down at the bottom of the viewport, where God intended it to be, even if your content is too short to keep it down naturally.

use-name
scut-sticky-footer-fixed
type
mixin only
arguments
  1. $height

    The height of the footer

  2. $wrapper
    default
    ".wrapper"

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

  3. $footer
    default
    ".scut-sticky"

    A CSS selector for the footer. Wrap this selector in quotes, too.

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 scut-sticky-footer-fluid.
  • 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 — 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.

Note: For now at least, this mixin can also be called with the deprecated use-name scut-sticky-footer.