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 の高さが #main の 50% ではなく、ページ全体の 50% になります。

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

どんな考えでも大歓迎です！