here is a fiddle doing what you asked using jQuery: FIDDLE
basically you just compare body and window heights, if body is longer set footer to absolute, if shorter set it to fixed:
$(function () {
//change this to 'display:none'
$('.right').css({'display':'static'});
var footer = $('footer');
var theDocument = $('body');
var theWindow = $(window);
if (theDocument.height() < theWindow.height()) {
footer.css({
'position': 'fixed'
});
} else {
theWindow.height();
footer.css({
'position': 'absolute'
});
}
});
UPDATE:
here is a version that fixes the footer being over the content, you just need to move the footer down by the size of its height
//###### code inside $(function () {}) will run as soon as DOM loads
$(function () {
//change this to 'display:static' to add more content
$('.right').css({'display':'none'});
//sets a custom event handler to window resize + zoom, which triggers the
//footer fix function
$(window).resize(function(){
adjust_footer();
});
//also call this function as soon as document finishes loading
adjust_footer();
});
//#####
function adjust_footer(){
var footer = $('footer');
var theDocument = $('body');
var theWindow = $(window);
//the +footer.height() checks if there is enough space for footer
//to stick it as fixed without having it cover content
if (theDocument.height() +footer.height() < theWindow.height()) {
footer.css({
'position': 'fixed',
//important, or footer will remain misplaced
'bottom':0
});
} else {
theWindow.height();
footer.css({
'position': 'absolute',
//push footer down and align it to the end of content
//meaning if footer's height is 50px, it will be pushed 50px
//from the bottom of the content
//* remember, bottom attribute aligns the element by its bottom
'bottom':- footer.height()
});
}
}