You should set your html
and body
elements to have a height of 100%, so your children divs know what to base the percentage off of. Like so:
html, body {
height:100%;
width:100%;
}
Change your container to this:
#container
{
width: 500px;
height: 100%;
background-color: #f00;
}
As for your scrolling issue, you're almost there. Change the code to the following:
#lower {
width: 100%;
height:100px;
background-color: #00f;
overflow-y: auto;
}
For it to work best, have a fixed height set on your lower div and that'll make it easy for the scrollable action to work best.
EDIT:
I realized I mis-read your question. You'd like to have your lower div fill the remaining height of the window. Here's how to do that in jquery:
var top = $('#upper').height();
var remaining_height = parseInt($(window).height() - top);
$('#lower').height(remaining_height);
I still haven't found a way to do that with only CSS... Sadly.