Creating Footer using ZURB Foundation CSS Framework - zurb-foundation

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; } }

Answer 2

I would create two different footers - one for desktop & tablets - and one for phones.
Using Zurb's "show on and hide on options" it's very easy to do. You can have any graphics used by both footers so any "download penalty" is small.
To create a sticky footer for you website you'll have to add some CSS to Zurb. (You can add this to the app.css file, which is Zurb's repository for your extra CSS)
Also the Brad Frost article (posted by Ed Charbeneau) is a great read - I hadn't seen that before.

Answer 3

HTML:
<div id="footer">
My Awsome Footer 2014
</div>
CSS
#footer{
height: 50px;
position: fixed;
bottom: 0px;
left: 0px;
line-height: 50px;
color: #aaa;
text-align: center;
width: 100%;
}
working fiddle: http://jsfiddle.net/AunmM/

Answer 4

Check out this simple sticky footer for foundation, no need for a #wrapper or a fixed height! Works in mobile as well. http://tangerineindustries.com/download/sticky_footer/

Answer 5

For reference, here's how I accomplished this using Foundation 4.0.
Given a <footer> tag.
footer {
#include panel($panel-color, $panel-padding);
width: 100%;
margin: 0;
position: fixed;
bottom: 0;
}

Answer 6

With foundation 6 the compass import isn't possible out of box. And workaround is hard to find.
Good solution together with foundation can be this little helper:
http://tangerineindustries.com/download/sticky_footer/
Pro:
Developer created this for using together with ZF 6.
You only need a <footer> tag.
Works with responsive depending flexible height of footer, even with
window resizing.
You don't need any extra #wrapper, #pusher, #footer whatever
html-elements.
You don't need any extra CSS.
Contra:
Uses JavaScript.

Answer 7

What you are trying to do is create a "Sticky Footer" or "Fixed Position Footer". This is something which is independent of Foundation and instead is a function of CSS in general.
I would suggest reading this article by Brad Frost. It identifies the basic CSS involved in creating a Fixed Position element and the compatibility issues that arise from doing so.
http://bradfrostweb.com/blog/mobile/fixed-position/