How to make a sticky footer, whilst keeping the wrapper dynamic?

Question

Well, I was stressed. - BIG time.

I googled around on the net for ages looking for a neat sticky footer. Well, guess what. Every sticky footer I found told you to use min-height:100%. This was annoying because it made your wrapper ugly, removing the dynamic height if the content was smaller than the window itself.

So the question is How do you make a sticky footer, whilst keeping the wrapper dynamic?

Answer 1

Here's a neat little javascript trick that allows you to make a sticky footer that stays at the bottom of the window when the content is smaller than the window. Then when the content is higher than the window, it puts the footer to the bottom of the page!

setInterval(function(){
    var wrapper_height = $('#wrapper').height();

var window_height = $(window).height();
    if(wrapper_height<window_height){
        $('footer').css({position:'absolute', bottom: '0px'});
    }else if(wrapper_height>window_height){
        alert('switched to mode 2');
         $('footer').css({position:'relative', bottom: '0px'});
    }
},10);



$('#wrapper').click(function(){

    $('#wrapper').append('<p>BLAH</p>');

}) 

​

Hope this helped!