jquery - ヘッダーとフッターの間に収まるように div のサイズを変更します

Question

すべての画面サイズで、ヘッダーとフッターの間に収まるように body-container div (position:relative) を合わせたいです。フッターは固定位置です。body-container は、ヘッダーとフッターの間に収まるようにサイズ変更する必要があります。

css が望ましいですが、jQuery/JS で行う方が簡単な場合は、それを使用します。
ページでどのような変更を行う必要があるか、または div に関する詳細情報が必要な場合はお知らせください。

PS: このページを phonegap で使用して、iPhone と iPad の両方で表示しています。

編集：

これが私がやろうとしているモックアップコードの JSFiddleです。#slider div を #fcheader と #footer の間に収めたい。
JSFiddle へのリンクにもコードが必要なので、ここにコードを示します -

HTML -

<div id="fcheader">
    <div id="headertext">Title1</div>
    <div id="headertitle">Title2</div>
</div>
<div id="bodycontent">
    <div id="slider">Body</div>
</div>
<div id="footer">
    <table width=100%>footer</table>
</div>
</div>

CSS -

#slider{
    position:absolute;
    width:100%;
    height:200px;
    top:0;
    overflow-y:scroll;
    overflow-x:hidden;
    font-color:#0067b3;
    background-color:yellow;
}
#headertitle{
    clear:both;
    color:#5E99D7;
    font-size:2.1em;
    margin-left:3%;
    position:relative;

}
#fcheader{
    background-color:red;
}
#headertext{
    clear:both;
    color:#0067b3;
    font-size:2.02em;
    margin-left:3%;
    margin-top:1%;
    padding-top:0.8%;
    padding-right:5%;
    float:right;
}
#bodycontent{
    position:relative;
}
#footer{
    position:fixed;
    width:100%;
    height:70px;
    bottom:5%;
    background-color:aqua;
}