html - How to make a footer fixed -

how make footer fixed without giving position property like

position:fixed 

i have tried lot, footer doesn't stand @ bottom every time. suggestion ?

maybe you're talking sticky footer...

in order work, footer can’t in wrapper class. code have structured example:

<div id="page"></div> <footer id="colophon"></footer> 

also, required set margin , padding body 0. these requirements far know of have css.

body {     margin: 0;     padding: 0; } 

the idea behind jquery pretty simple. check height of element, check height of viewport. if viewport height greater #page’s height, need set css on footer. css absolutely position @ bottom of frame. it’s idea make sure footer’s width 100% looks right.

brought in jquery , inserted code.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() {   var bodyheight = $("body").height();   var vwptheight = $(window).height();   if (vwptheight > bodyheight) {    $("footer#colophon").css("position","absolute").css("bottom",0);   } }); </script> 

in order make work older versions of ie (< ie9), include google's html5 shiv.

<!– add conditional ie7 + 8 support –>    <!–[if lte ie 8]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]–> 

---

see original demo or on jsfiddle

source: joseph fitzsimmons