How do I get a floating footer to stick to the bottom of the viewport in IE 6?
I know this would be easy with position:fixed, but unfortanately I\'m stuck with supporting IE 6. How can I do this? I would rather use CSS to be clean, but if I have to u
-
This may work for you. It works on IE6 and Firefox 2.0.0.17 for me. Give it a shot. I made the footer's height very tall, just for effect. You would obviously change it to what you need. I 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>讨论(0) -
If the footer has fixed height and you know it and can hard-code 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's the height of the footer */ overflow : auto; background-color : blue; } .footer { position : absolute; left : 0; right : 0; bottom : 0px; /* that's 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>讨论(0) -
I have done this using CSS expressions in the Past.
Try something like this:
.footer { position: absolute; top: expression((document.body.clientHeight - myFooterheight) + "px"); }read more here
and here讨论(0) -
$(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); });讨论(0) -
if you do want to not use the conditional comments, so that you can put the css in a separate file, use
!important. Something 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> 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:#ffffd; 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's 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>讨论(0) -
If you put the
heightto100%andoverflow: autoto the<html/>and<body/>tags, anything with the absolute position will become fixed. It the most basic for is pretty funky with oddly placed scroll bars but can be tweak to 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)
加载中...
- 热议问题