To use the sticky footer you’ll need to modify the default theme template and add some css.

include/theme/THEMENAME/default.html:

...
    <body>
      <div class="wrap">
        <!-- navbar and content here! -->
        <div class="footer-push"></div>
      </div>
      
      <footer>
        <div class="container">
          <!-- footer here! -->
        </div>
      </footer>
    </body>
    ...

Sass code:

/* Sticky footer */
    $footerHeight: 75px;

    //Page full height
    html, body {
        height: 100%;
    }
    
    #page-wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        // Negative indent footer by it's height
        margin-bottom: -($footerHeight);
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
    }
    
    //footer fixed height
    .footer-push,
    footer {
        height: $footerHeight;
        max-height: $footerHeight;
        overflow: hidden;
    }

I’ve used this theme with a sticky footer.

Hooligan theme screenshot

You can install it running in your terminal:

rake theme:install git="https://github.com/Miguelos/hooligan.git"

Here you have the example of a sticky footer for twitter bootstrap.

Published

15 February 2014

Category

post

Tags

blog comments powered by Disqus