Make a Child Div Extend to Browser Size

Make a Child Div Extend to Browser Size

I was wondering how to make a div with position:absolute extend to the
bottom of the browser when it is the child of a div with
position:relative. Here is the html:
<div id='square'>
<div id='rectangle' /></div>
And here is the css:
#square {
position:relative;
height:100px;
width:100px;
background:red;
}
#rectangle {
position:absolute;
width:50px;
background:blue;
height:100%;
}
http://jsfiddle.net/mHpuW/