html - 4 div のレイアウト - 固定 2 つ、動的 (スクロール不可) 1 つ、スクロールバー付きの高さ 1 つ

Question

単一のWebページでHTMLとCSSを使用して次の動作を実現したい

最初の 3 つの領域 (黒、赤、青) は機能しましたが、スクロール可能なコンテンツ (緑) に問題がありました。静的な高さで動作しますが、ページの残りの部分を動的に埋める方法がわかりません。

これが私が得たものです

コードへのリンク

<div class="body">   
<div class="menu">
    menu
</div>           
<div>
    <div class="dynamiccontent">
        <div class="errorheader">
            Errors
        </div>
        <div class="errorcontent">
            errors   
        </div>
        <div class="fixedtext">
            some text
        </div>            
        <div class="fillcontent">
            fillcontent
        </div>
    </div>
</div>

.body 
{ 
    background:red; 
    margin:0 auto;
    width:100%;
    top:0px;
}

.menu 
{ 
    background:black;
    color: white;
    height: 100px;
} 

.dynamiccontent
{
    position:fixed;
    top:50px;
    margin:0px auto;
    width:100%;     
    background: red;
}

.errorheader
{ 
    color: white;    
    text-align: center;    
    font-size: 1.4em;
}

.errorcontent
{    
    color: white;   
    text-align: center;   
}

.fixedtext 
{
    background: blue; 
    color: white;
    position: relative;
}

.fillcontent
{
    background: green; 
    position: relative; 
    overflow: auto; 
    z-index: 1; 
    height: 400px;
}

あると便利なのが、右側の「ブラウザ スクロールバー」の使用です (緑色のコンテンツ ボックスの短いローカル スクロールバーだけではありません)。

ご協力ありがとうございました！