Cum se poate avea footer fix

Dacă site-ul necesită un footer fix, din start trebuie gândită întreaga structura asfel încât să existe două mari părți alte structurii html, adică două divuri: un div va conține footer-ul iar celălalt div va conține tot ce este deasupra footer-ului.

O observație: footerul fix poate fi fix relativ la ecran, caz în care va fi în permanență în partea de jos a ecranului, evident suprapunându-se peste texte sau footerul va fi fix relativ la conținut, astfel dacă conținutul ocupă o mică parte din ecran footerul va fi în partea de jos vizibil, dacă conținutul se întinde pe mai multe ecrane, footerul va fi în partea de jos, așa cum și este de obicei. E importantă această distincție.

Primul caz: footer aliniat jos vizibil în permanență:

<style type="text/css">
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* Pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
</style>
<script type="text/javascript">
function setnewcontentheight(){
	$("#inhalt").height(Math.max($(window).height()-$("#footer").height(),$('#inhalt').height()));
}

$(window).resize(function(){
	setnewcontentheight();
});

$(document).ready(function() {
	setnewcontentheight();
});
</script>

Același caz fără JavaScript, doar CSS:

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Al doilea caz: footer în permanență în josul conținutului

*{margin:0;}
html, body {
	height: 100%;
}
#inhalt {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}
#footer, #clearfooter {
	height: 30px;
}
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>

Sursa: flashjunior.ch/school