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: <ol> <li>Is there a way to do this without Javascript?</li> <li>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 <code>new FloatingFooter("floatingDiv")</code>).</li> </ol> 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. <pre class="prettyprint"><code><!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>  </head> <body> This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page This is to expand the content on the page <div class="footer">-- This is your liquid footer --</div> </body> </html> </code></pre>

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 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?

How do I keep the footer fixed to the bottom?

Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything in a <div> or any other block-level element with the following CSS styles: min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; .

Why isn't my footer at the bottom of the page?

The footer width and height properties may be interfering with the footer positioning. If the footer is too large, then it takes up too much space at the bottom of the Web page. Within the "#footer" bracket tags of "{" and "}" are listed the "width: Xpx;" and "height: Xpx;" coding.

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>

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

Tags:

javascript

css

internet-explorer-6

sticky-footer

Bialecki

People also ask

1 Answers

Taptronic

Recent Activity

Donate For Us

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

Tags:

javascript

css

internet-explorer-6

sticky-footer

Bialecki

People also ask

1 Answers

Taptronic

Related questions

Recent Activity

Donate For Us