Sticky footer (with Sass/Compass)

Public

Get raw version
text
  1. This code assumes the height of your footer is fixed (as: not flexible).

Your page.tpl.php should look like this

Get raw version
php
  1. <div class="page">
  2. <header>
  3. /* header content */
  4. </header>
  5. <div class="main">
  6. /* main content */
  7. </div>
  8. </div>
  9. <footer>
  10. /* footer content */
  11. </footer>

Your should have following variables declared in your .scss files

Get raw version
css
  1. $footer-height: 150px;
  2. $footer-top-margin: 50px;

This will make it sticky

Get raw version
css
  1. html {height: 100%;}
  2. body {height: 100%;}
  3.  
  4. .page {
  5. min-height: 100%;
  6. > .main {
  7. overflow: auto;
  8. padding-bottom: $footer-height + $footer-top-margin;
  9. }
  10. }
  11.  
  12. body > footer {
  13. clear: both;
  14. height: $footer-height;
  15. margin-top: -($footer-height);
  16. position: relative;
  17. }