tutotials – purabtech.in

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.

create sticky footer using css or javascript

Share Article: