调整div以适应页眉和页脚之间的大小

Question

我希望在所有屏幕尺寸上使我的身体容器div（位置：相对）适合页眉和页脚之间。页脚处于固定位置。主体容器应调整大小以适应页眉和页脚之间。

虽然css是首选​​，但如果在jQuery / JS中更容易，那么我将使用它。
请让我知道我应该在页面中做些什么更改，或者如果您需要有关div的更多信息。

PS：我在phonegap中使用此页面在iPhone和iPad上都显示。

编辑：

Here's the 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;
}