Css : 100% height problem

If we want layout a page without vertical scroller
And there are two boxes with height 50px and 100%.

<div style="width:100%;height:50px;background-color:#000">

</div>
<div style="width:100%;height:100%;background-color:#ff0000">

</div>

There would be a scroller.

There is a tip to layout two box in a page:

<div style="width:100%;height:50px;background-color:#000">

</div>
<div style="width:100%;position:absolute;left:0;right:0;top:50px;bottom:0;background-color:#ff0000">

</div>

By this method you can easily layout a page without using javascript to dynamically calculating the height.