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 use Javascript, that's not the end of the world. In my current implementation I have a "floating footer" that floats above the main content area and is positioned with Javascript. The implementation I have right now is not particular elegant even with the Javascript, so my questions are:
- Is there a way to do this without Javascript?
- If I have to use Javascript, are there any "nice" solutions to this floating footer problem? By "nice" I mean something that will work across browsers, doesn't overload the browser's resources (since it will have to recalculate often), and is elegant/easy to use (i.e. it would be nice to write something like
new FloatingFooter("floatingDiv")).
I'm going to guess there is no super easy solution that has everything above, but something I can build off of would be great.
Finally, just a more general question. I know this problem is a big pain to solve, so what are other UI alternatives rather than having footer content at the bottom of every page? On my particular site, I use it to show transitions between steps. Are there other ways I could do this?
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>
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:#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'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>
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
$(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);
});
If you put the height to 100% and overflow: auto to 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>
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>
