Div at bottom of window and adaptable height div

Question

Is there a way to get a div to always be at the bottom of the window, and another div to change its height to fill any space that it leaves, and that div will scroll if its content is too long. (I never want the window to scroll).

This is best illustrated by a picture:

div layout http://img401.imageshack.us/img401/3209/divs.png

The green div will always put itself at the bottom of the window, and the orange div will fill the gap. When the window is smaller, like in the right hand image, the orange div will be smaller and will scroll.

The green div can be toggled. Sometimes the green div will have display: none, and then the orange div will stretch to the bottom. When the green div has display: block again, it will look like the picture again.

It has to work in IE6.

So far I can get the green div to go to the bottom by:

position: absolute;
bottom: 0;

But I don't know how to get the orange div to do what I want.

Answer 1

you should use fixed instead of absolute

position: fixed;
bottom: 0;

Answer 2

you can take a look at "Exploring Footers" at A List Apart,

http://www.alistapart.com/articles/footers/

hope it helps, Sinan

EDIT: (pure CSS way)

Your Markup:

<div class="non-footer">Your content goes here.</div>
<div class="footer">Here is for footer content.</div>

Your CSS:

body, html, .non-footer {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
.footer {
    height: 150px;
    margin-top: -150px;
    width: 100%;
}

I might be missing some details, but this should work and it gives the basic idea behind the trick.

Sinan.

Answer 3

Test this. Put this in the head:

<script>
    var int=self.setInterval(function(){clock()},100);

    function clock()
    {
        var s = document.getElementById("Footer");
        s.style.position = "Fixed";
        s.style.bottom = "0px";
        s.style.margin = "0px";
        s.style.height = "20px";
        s.style.width = "30px";
    }

    window.onload=clock
</script>

The html:

<div id="Footer"></div>