Setting the min-height of a div within the zurb-foundation - html

Question

I've just been introduced to the Zurb Foundation 4 framework via a friend of mine. Interesting stuff. But i'm having a problem I can't seem to understand. I have a site based on 4 rows (header, navbar, content, footer);
<div class="row siteBase">
<div class="row siteHeader" id="siteHeader">
<div class="large-12 c7olumns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.1.2.</p>
</div>
</div>
<div class="row siteNavbar" id="siteNavbar">
navbar
</div>
<div class="row siteBody" id="siteBody">
base
</div>
<div class="row siteFooter" id="siteFooter">
footer
</div>
</div>
here's my CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.siteBack {
background-color: #545454;
}
.siteBase {
/*base size and color*/
width: 1280px;
min-height: 100%;
margin: 0 auto;
background-color: #f2f2f2;
/* exact fit the contents to the border */
padding-left:15px;
padding-right:15px;
/* border size and color */
border-style: solid;
border-left-width: 4px;
border-top-width: 0px;
border-right-width: 4px;
border-bottom-width: 0px;
border-color: #7da500;
/* add some shadows to the borders */
-moz-box-shadow: 0 0 10px 5px #272727;
-webkit-box-shadow: 0 0 10px 5px #272727;
box-shadow: 0 0 10px 5px #272727;
}
.siteHeader
{
width: 100%;
height: 250px;
background-color: #7da500;
}
.siteNavbar
{
height: 50px;
background-color: #1d1d1d;
}
.siteBody
{
min-height: 100% auto;
margin: 0 auto;
background-color: #f2f2f2;
}
.siteFooter
{
height: 50px;
background-color: #7da500;
}
The problem I have is that the sitebody div isn't stretched to to full 100%. The header and navbar is fixed size, as is the footer. But I wan't the sitebody div to take the remaining space so that the footer is always placed in the lower bottom of the screen (at minimum).
What am I missing here? Thanks a lot for your help.

Answer 1

Basically what you need is to stick your footer to the bottom of the page. In that manner you will have a full body even if your main content is small. You can take a look at this SO question to see how it is implemented. There could be a lot going on in there as that layout is a bit complex. So I did a sample for you that you can use for a more simple layout. Here is the modified css from the other SO question.
html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /* same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
background-color:yellow;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}