CSS make bottom container height 100% of visible space

Question

http://jsfiddle.net/n8YsM/

How do I make the div id blue take up the remaining visible space after the container div. Also this div should have no content.

Answer 1

Use this CSS:

/*add this:*/
html, body
{
    height: 100%;
}

.clear
{clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;

}
#blue
{width:100%;
background:blue;
/*and this*/height:100%;
}

Updated fiddle.

For the browser to detect that you want to expand the blue div 100%, you have to tell the HTML and the body of your page to be 100% as well, or the div has nothing to reference the percentage from.

Hope it helps you out.

Answer 2

Change the css to:

#container{margin-left:auto;margin-right:auto;width:200px;}

html,body { height:100%; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

#blue{width:100%;background:blue;height:100%;}

You had to extend the height of the page too.

Edit: Someone else answered it just before me as I was trying to get code tags right :(

Answer 3

something like this? http://jsbin.com/uxeda4