子div高度基于它的父亲

Question

我正在尝试创建一个填充浏览器窗口高度的页面（应该没有滚动）。在页面上有2个div（class = module），它们都应该是它们父级的50％（id = main）。

<div id="container">
    <div id="header">
        This is the header.<br /><br />It's height could vary..
    </div>
    <div id="main">
        <div class="module">
            module 1..
        </div>
        <div class="module">
            module 2
        </div>
    </div>
</div>

问题是还有一个标题div可以有一个灵活的高度，所以通过指定高度：100％#main导致整个页面滚动（#main给出整个页面的高度而不是页面高度减去标题的高度。）

这当然会导致每个.module div的高度为整个页面的50％，而不是#main的50％。

http://jsfiddle.net/pStDj/3/

任何想法都将不胜感激！