I'm having the following problem I want to dynamically position my footer, so that if I have a long content the footer only shows at the end of the page, but if I have a shorter one, the footer shows on the bottom of the display.
I've tried Sticky footer and it doesn't work cause it's relative to the page display, and I want it to be relative to display height and content height. I've also tried this Jquery Script and doesn't do the trick:
<script>
x = $('#div-that-increase-height').height()+20; // +20 gives space between div and footer
y = $(window).height();
if (x+100<=y){ // 100 is the height of your footer
$('#footer').css('top', y-100+'px');// again 100 is the height of your footer
$('#footer').css('display', 'block');
}else{
$('#footer').css('top', x+'px');
$('#footer').css('display', 'block');
}
</script>
Thanks in advance