css - ヘッダーとフッターが固定され、コンテンツがスクロール可能で、コンテンツの高さのピクセル値が固定されていないモーダル表示用の DIV

Question

固定ヘッダーとフッター、スクロール可能なコンテンツ領域を使用し、ホルダーとコンテンツ本文の幅/高さのパーセンテージ値のみに依存するモーダル表示用の DIV を作成する方法に困惑しています。免責事項: 私は CSS についてあまり知りません。

ここに私が欲しいものがあります:

• 幅 65%、高さ 60%、ページ中央の DIV
  • ヘッダー: 高さ 100px、固定位置
  • コンテンツ: DIV に残っているすべての高さ、固定位置、スクロール可能なコンテンツ
  • フッター: 高さ 100px、固定位置

編集：JSFiddle

これが私の試みです：

html, mbody {
    overflow:auto;
}

#mholder{
    padding: 10px 10px 10px 10px;
    width:  65%;
    height: 60%;
    background-color: white;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
}

#mheader{
    position: fixed;
    height: 100px;
    left:0;
    top:0;
    width: 100%;
}

#mbody{
    width:100%;
}

#mfooter{
    height:100px;
    width:100%;
    position: fixed;
    left: 0;
    bottom: 0; 
}

これが私がページに持っているものです：

<div id="mholder">
    <div id="mheader">Header text</div>
    <div id="mbody">Long body text...</div>
    <div id="mfooter">Footer text</div>
</div>

何が起こっているのかというと、モーダル表示ではなく、ヘッダーがページの左上に表示されていることです。右下のフッターも同様です。モーダル領域 (白い背景で識別される必要があります) は間違いなくページの 65%/60% ではなく、mbodyhtml はmholderdiv に無計画に重なっています。

編集：JSFiddle