Flushing footer to bottom of the page, twitter boo

Question

I am generally familiar with the technique of flushing a footer using css and this following approach.

But I am having some trouble getting this approach to work for Twitter bootstrap, most likely due to the fact that Twitter bootstrap is responsive in nature. Using Twitter bootstrap I am not able to get the footer to flush to the bottom of the page using the approach described in the above blog post.

Answer 1

It looks like the height:100% 'chain' is being broken at div#main. Try adding height:100% to it and that may get you closer to your goal.

Answer 2

HenryW's answer is good, though I needed a few tweaks to get it working how I wanted. In particular the following also handles:

• Avoiding the "jumpiness" on page load by first marking invisible and setting visible in javascript
• Dealing with browser resizes gracefully
• Additionally setting the footer back up the page if the browser gets smaller and the footer becomes bigger than the page
• Height function tweaks

Here's what worked for me with those tweaks:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});