create sticky footer using css or javascript

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.

01html{
02 
03height:100%
04 
05}
06 
07body{
08 
09height:100%
10 
11}
12 
13#footer{
14 
15position: relative;
16 
17bottom: 0px;
18 
19height: 100px;  //You must need to know your footer height
20 
21margin-bottom:-100px; //here I am thinking footer will be 100 px
22 
23}

You can change the footer height as per your need or footer height.

Sticky footer you will also achieve using javscript code.

01<script>// <![CDATA[
02 
03// ]]></script>
04document.body.onload = function () {
05 var myWidth = 0, myHeight = 0;
06 if( typeof( window.innerWidth ) == 'number' ) {
07 //Non-IE
08 myWidth = window.innerWidth;
09 myHeight = window.innerHeight;
10 } else if( document.documentElement &&
11 ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
12 //IE 6+ in 'standards compliant mode'
13 myWidth = document.documentElement.clientWidth;
14 myHeight = document.documentElement.clientHeight;
15 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
16 //IE 4 compatible
17 myWidth = document.body.clientWidth;
18 myHeight = document.body.clientHeight;
19 }
20 window.alert( 'Width = ' + myWidth );
21 window.alert( 'Height = ' + myHeight );
22 
23 middle_container = myWidth - 150; // here I am thinking footer and header hight is 150px
24 document.getElelmentByID("main").style.height = middle_container;
25}
26// ]]>

You just need to minus the header and footer height from middle_container.

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn View all posts by Purab

One thought on “create sticky footer using css or javascript”

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 ) ;
});