ansaurus

Question

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

Answer 1

+1 A:

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

Mattias 2008-09-28 20:37:44

I think "expression" is supported only in IE...

qbeuek 2008-09-28 20:41:32

So use expression() for IE6 and position:fixed for everyone else using conditional comments.

Eevee 2008-09-28 22:39:38

yeah, it sounds like a perfectly valid way to solve an *IE only* problem.

nickf 2008-09-29 01:57:28

Answer 2

A:

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"&gt;
<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>

qbeuek 2008-09-28 20:52:11

Answer 3

+8 A:

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"&gt;
<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>

Optimal Solutions 2008-09-29 01:07:09

i use a variant without the conditional comments since i usually like to put my css in a separate file. see my answer below.

Keith Bentrup 2009-05-24 22:04:06

Answer 4

A:

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"&gt;
<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 />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
                overflow....<br />
    </body>
</html>

Morgan ARR Allen 2008-09-29 21:53:10

Answer 5

+3 A:

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"&gt;  
<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>

Keith Bentrup 2009-05-24 21:51:37

ansaurus

tags:

views:

answers:

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

related questions