You can create sticky footer using css perfectly. Use following css code for creating the sticky footer. Many people gave example of google sticky footer.
create sticky footer using css or javascript
Use bellow CSS code.
html{
height:100%
}
body{
height:100%
}
#footer{
position: relative;
bottom: 0px;
height: 100px; //You must need to know your footer height
margin-bottom:-100px; //here I am thinking footer will be 100 px
}
You can change the footer height as per your need or footer height.
Sticky footer you will also achieve using javscript code.
<script>// <![CDATA[
// ]]></script>
document.body.onload = function () {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
document.getElelmentByID("main").style.height = middle_container;
}
// ]]>
You just need to minus the header and footer height from middle_container.
Great post. However, I think you should use myHeight in line 21 (middle_container = myWidth – 150;)
Based on your idea, I did this with JQuery (been #expansor a div inside #container.
$(document).ready( function () {
var myHeight = $(window).height();
var contenidoHeight= $(“#container”).height();
var footHeight = $(“#footer”).height();
$(“#expansor”).height(myHeight – contenidoHeight – footHeight ) ;
});