css - 子 div 高度基于它的父级

Question

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

<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 可以有一个灵活的高度，所以通过在 #main 上指定 height:100% 会导致整个页面滚动（#main 是给定整个页面的高度而不是页减去页眉的高度）。

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

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

任何想法将不胜感激！