Make a Footer Stick to the Bottom of the Page and have a fixed Navigation at the Top

Question

as you can tell by the title I want to have a footer stick to the bottom. I know that there are a lot of topics on that. I already read through them. But I can not get it to work, because of my navigation, which is fixed to the top.

The layout looks like this:

<header class="navbar navbar-fixed">
</header>
<div class="content">
  <div class="container">
  </div>
  <div class="clearfooter"></div>
</div>
<footer>
</footer>

And here is the CSS:

html, body {
  height: 100%;
}

body {
  padding-top: 40px; /* height of the navbar */
}

.navbar-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
}

.content {
  margin-bottom: -30px;
  min-height: 100%;
  position: relative;
}

.clearfooter {
  clear: both;
  height: 30px;
}

#footer {
  height: 30px;
  position: relative;
}

I tried this tutorial. But the footer is not pinned to the bottom of the window it is further down (not in the viewport anymore). I already tried to fix it with additional padding/margin but nothing worked :(

Answer 1

Instead of adding padding to the body to push your page just create a push div to add some space between your fixed header and your content, like so:

HTML

<div class="push">&nbsp;</div>

CSS

.push { height:40px; }

.push:before, .push:after {
  display: table;
  content: "";
  zoom: 1;
}

.push:after {
  clear: both;
}

Here is a demo:

http://jsfiddle.net/andresilich/fVpp2/1/show/

Edit here http://jsfiddle.net/andresilich/fVpp2/1/

Note: Added a bunch of break lines to illustrate the positioning of the footer.

(edit: jsfiddle cut my CSS, added it back.)