Creating Footer using ZURB Foundation CSS Framework

Question

I am using ZURB foundation CSS framework to design a website. Currently I am trying to create a footer that will stay at the bottom of my page. I have the following code for the footer but its not going to the bottom, rather its showing up in the middle.

Could you please tell me how to create a footer (using ZURB foundation framework) that will stay at the bottom?

<div class="row">
    <div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>

Answer 1

Simple! Zurb Foundation is itself based on Compass. So you can use the 'Compass Sticky Footer' mixin.

http://compass-style.org/reference/compass/layout/sticky_footer/

There is an example of how to do it here: http://compass-style.org/examples/compass/layout/sticky-footer/

But you just go:

<div class='example'>
  <div id='layout'>
    <div id='header'>
      <h1>Sticky Footer Example</h1>
    </div>
    <p>
      This is the main content area.
    </p>
    <p>
      In this example you should pretend that the red box
      is actually the browser window.
    </p>
    <p>
      Because, being a contrived example, it's not actually sticking
      to the bottom of the page.
    </p>
    <div id='layout_footer'></div>
  </div>
  <div id='footer'>
    This is the footer area.
  </div>
</div>

And in you SCSS

@import "compass/reset.scss";
@import "compass/layout.scss";

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");

#header {
  background: #999999;
  height: 72px; }

#footer {
  background: #cccccc; }

.example {
  height: 500px;
  border: 3px solid red;
  p {
    margin: 1em 0.5em; } }