html - 使子 div 扩展到浏览器大小

Question

我想知道如何使具有位置：绝对的 div 扩展到浏览器的底部，当它是具有位置：相对的 div 的子级时。这是html：

<div id='square'>
<div id='rectangle' /></div>

这是CSS：

#square {
position:relative;
height:100px;
width:100px;
background:red;
}
#rectangle {
position:absolute;
width:50px;
background:blue;
height:100%;
}

http://jsfiddle.net/mHpuW/

Answer 1

http://jsfiddle.net/mHpuW/1/

html,body{height:100%;}
#square {
    position:relative;
    height:100%;
    width:100px;
    background:red;
}
#rectangle {
    position:absolute;
    width:50px;
    background:blue;
    height:100%;
}