Best IT Recipes

How to get a floating footer to stick to the bottom of the viewport in IE 6?

I know this would be easy with the position: fixed, but unfortunately I am stuck in IE 6 support. How can I do this? I would rather use CSS to clean up, but if I have to use Javascript, this is not the end of the world. In my current implementation, I have a “floating footer” that floats over the main content area and is positioned using Javascript. The implementation I have right now is not particularly elegant even with Javascript, so my questions are:

  • Is there any way to do this without Javascript?
  • If I need to use Javascript, are there any “good” solutions to this floating-footer problem? By “good,” I mean something that will work in different browsers, does not overload browser resources (as this will often have to be recounted) and elegant / easy to use (i.e. it would be nice to write something like new FloatingFooter("floatingDiv") ).

I'm going to guess that there is no super simple solution that has everything above, but something that I can build would be great.

Finally, just a more general question. I know this problem is a big pain to solve, so what are the other UI alternatives and not the footer content at the bottom of each page? On my particular site, I use it to display transitions between steps. Are there any other ways to do this?

+12
javascript css internet-explorer-6 sticky-footer
Sep 28 '08 at 20:27
source share
6 answers

This might work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give him a chance. I made the footer height very high, just for effect. You obviously change it to what you need. Hope this works for you.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Liquid Footer</title> <style type="text/css"> .footer { background-color: #cdcdcd; height: 180px; text-align: center; font-size:10px; color:#CC0000; font-family:Verdana; padding-top: 10px; width: 100%; position:fixed; left: 0px; bottom: 0px; } </style> <!--[if lte IE 6]> <style type="text/css"> body {height:100%; overflow-y:auto;} html {overflow-x:auto; overflow-y:hidden;} * html .footer {position:absolute;} </style> <![endif]--> </head> <body> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> This is to expand the content on the page<br> <div class="footer">-- This is your liquid footer --</div> </body> </html>

+20
Sep 29 '08 at 1:07
source share

if you don't want to use conditional comments so you can put css in a separate file, use !important . Something like that:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> html { overflow-x: auto; overflow-y: scroll !important; overflow-y: hidden; /* ie6 value b/c !important ignored */ } body { padding:0; margin:0; height: 100%; overflow-y: hidden !important; overflow-y: scroll; /* ie6 value b/c !important ignored */ } #bottom { background-color:#ddd; position: fixed !important; position: absolute; /* ie6 value b/c !important ignored */ width: 100%; bottom: 0px; z-index: 5; height:100px; } #content { font-size: 50px; } </style> </head> <body> <div id="bottom"> keep this text in the viewport at all times </div> <div id="content"> Let create enough content to force scroll bar to appear. Then we can ensure this works when content overflows. One quick way to do this is to give this text a large font and throw on some extra line breaks. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/> </div> </body> </html>
+4
May 24 '09 at 21:51
source share

I have done this using CSS expressions in the past.

Try something like this:

 .footer { position: absolute; top: expression((document.body.clientHeight - myFooterheight) + "px"); }

more details here
and here

+2
Sep 28 '08 at 20:37
source share
 $(function(){ positionFooter(); function positionFooter(){ if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code $("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"}) } } $(window).scroll(positionFooter); $(window).resize(positionFooter); });
+1
Oct 31 '11 at 7:10
source share

If you put height at 100% and overflow: auto in the <html/> and <body/> tags, everything with an absolute position becomes fixed. This is the most basic option - quite funny with unusually arranged scrollbars, but you can tune for decent results. Example

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> html, body { height: 100%; overflow: auto; } .fixed { position: absolute; bottom: 0px; height: 40px; background: blue; width: 100%; } </style> </head> <body> <div class="fixed"></div> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /> overflow....<br /><!-- ... --> </body> </html>
0
Sep 29 '08 at 21:53
source share

If the footer has a fixed height, and you know that and can hardcode it in CSS, you can do it like this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> .content { position : absolute; top : 0; left : 0; right : 0; bottom : 50px; /* that the height of the footer */ overflow : auto; background-color : blue; } .footer { position : absolute; left : 0; right : 0; bottom : 0px; /* that the height of the footer */ height : 50px; overflow : hidden; background-color : green; } </style> </head> <body> <div class="content"> everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here everything from the page goes here </div> <div class="footer"> the footer </div> </body> </html>
-one
Sep 28 '08 at 20:52
source share


More articles:


All Articles