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

Answer 1

I don't think this is possible without working out the size of the centre div using Javascript.

CSS positioning basically flows from the top down, so to get a div to stick at the bottom of the page you need to take it out of the flow of the page using position:absolute (or position:fixed)

But now that div is out of the flow of the page, so the middle div doesn't know to stop at the top of the bottom div. It will just carry on behind the bottom div and won't display scrollbars.

Answer 2

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>

Answer 3

try this: set the orange div position relative with a bottom margin = height of the green div with an overflow: auto

I think your orange div will then scroll if it becomes larger then the space between the white and green div. to solve your background problem, you can easily set orange as background color. In that way, it will never be visible for a user that your orange div is in fact smaller as the space between the white and green divs

Answer 4

You can use the following solution to get the orange div to do what you want:

if ( ( $('.container-with-footer').height() ) < ( $(window).height() ) ) {
    $('footer').css({
        "position":"absolute",
        "left":"0",
        "right":"0",
        "bottom":"0"
    })
}

Answer 5

you should use fixed instead of absolute

position: fixed;
bottom: 0;

Answer 6

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.