Sticky Footer SCSS – Best practices for Designers and Developers

  • Topics:

    • Sticky Footer is name for a specific CSS that places the footer at the bottom of page, rather than right below the content area. This eliminates the awkward gap between where the footer ends and where the screens height ends like in this example:

    sticky footer

     

    When you using the sticky footer you get a result more like this:

    stick footer #2

     

    final sticky footer

     

    Basically the footer sticks to the bottom of the screen and if the viewing area is small it will be pushed all the way until the bottom of the content is reached. Example of this in action can be found here: http://ryanfait.com/sticky-footer/

    Now there are lots of sticky footers out there, and that’s the real problem, a lot of them are out dated or rather hard to implement. As someone who has adapted their workflow to include scss rather than pure css I was looking for an elegant solution to the troubles of getting sticky footer to work, and found a way to do it with just a couple lines of code.

    Here are the easy steps:

    Assuming you are using WordPress we are going to modify your template to support for the sticky footer mix in.  In your WordPress template folder we are going to modify your header and footer files.

    In Header.php
    wrap the  #main div, with another container, we will call it master as follows… <div id=”master”> don’t worry about closing the div we will then close this div in our footer file next.

    then, close the div:

    In Footer.php
    After the first closing div  (after <!– #main –>) add our closing div  along with a push class to add extra space for our footer:

    </div><!-- end #master -->
<div class="sf-push"> </div>

    Then add the “sticky-footer” mixin to your mixins file:

    @mixin sticky-footer($footer-height, $root-selector:
unquote("#master"), $root-footer-selector:
unquote(".sf-push"), $footer-selector:
unquote(".footer")) {
html, body {
height: 100%; }
#{$root-selector} {
clear: both;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -$footer-height;
#{$root-footer-selector} {
height: $footer-height; } }
#{$footer-selector} {
clear: both;
position: relative;
height: $footer-height; } }

    Then in your sass file add the @include of (make sure your mixin is loaded before the include statement):

    @include sticky-footer(30px);

    The number in the parenthesis is how high the footer will be

    You should all be set. Questions or comment? Let us know

    In Development