Bootstrap Navbar-Fixed Bottom Sticky Footer

Question

I'm using bootstrap's navbar-fixed-bottom to have a sticky navbar at the bottom. This works great. The problem I have is when I use Backbone.Marionette to dynamically add content the navbar no longer sticks to the bottom - rather it just stays in the same spot, hiding some content and eventually the content just goes below it as I add more.

Is there a way to force the navbar to stay stuck to the bottom regardless of how much content is added?

Answer 1

Or simply...

.navbar{

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  /* the rest of the styling */

}

A lot neater and easier I find. And doesn't matter how tall your navbar is. You can add heights and colours and whatever styling you want after it.

Answer 2

This is an old trick without Bootstrap. Supposed you know the height of the navbar. You can try this: http://jsfiddle.net/e85xw/

.navbar{
    height: 2em;
    width: 100%;
    background: blue;
    color: white;
    position: fixed;
    top: 100%;
    margin-top: -2em;
}

If you don't know the height of the navbar, you can use JS for a little help http://jsfiddle.net/2T282/

<style>
.navbar{
    height: 2em;//in case this number is dynamic
    width: 100%;
    background: blue;
    color: white;
    position: fixed;
    top: 100%;
}
</style>

<script>
$(document).ready(function(){
    $('.navbar').css('margin-top',$('.navbar').height() * -1);
});
</script>