The code is here.....
<style type="text/css">
html, body {
height: 100%;
}
div.header, div.foo { display:block; text-align: center; }
div.header { height:30px; background-color:#f5f5f5 }
.navbar-fixed {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
}
.content {
position: relative;
min-height: 100%;
height: auto !important;
margin-bottom: -50px; / the bottom margin is the negative value of the footer's height /
}
div.container{
padding:20px 0px 50px 0px;
}
div.foo {
height: 50px;
position: relative;
background-color:#dddddd;
}
</style>
<div class="header navbar navbar-fixed">
This is the Header
</div>
<div class="content">
<div class="container">
<p>see the forest for the trees.</p>
</div>
</div>
<div style="clear:both;"></div>
<div class="foo">
This is the footer, which will stay at the bottom!
</div>
