Search code examples
cssfooterstickysusy-compass

Susy getting footer at bottom

Using Susy Grids, how do you force the container to be min-height 100% and footer to be at the bottom of the page.

html

<div class="page">
  <header id="header-container">header</header>
  <section ="main-container">
    some short content
  </section>
  <footer id="footer-container">footer</footer>
</div>

css/scss

$total-columns  : 16; 
$column-width   : 4.5%;
$gutter-width   : 1%;
$grid-padding   : 6.5%;
$legacy-support-for-ie6 : false;

.page { @include container;}
#main-container{@include span-columns($total-columns omega);}
#footer-container{
    @include clearfix;
    @include reset-columns; 
    min-height:100px;}
Solution

  • This might be a job for the Compass Sticky Footer mixin.