Html div元件上的100%高度在2个静态高度之间

我想让一个div有100%的高度。这永远是一个痛苦的屁股。。。 我希望我的#包装是100%，我的#中间也是

<div id="wrapper" style="margin-left:auto; margin-right:auto; width:900px;">
    <div id="top" style="height: 100px;width:inherit;">
        This stays top, with static height.
    </div>
    <div id="middle" style="width:inherit;">
        This should take all space that is left in height...
    </div>
    <div id="footer" style="height:50px;width:inherit;">
        This stays in bottom, with static height
    </div>
</div>

这将保持顶部，具有静态高度。
这将占用所有剩余的高度空间。。。
这保持在底部，具有静态高度

---

嗯，如果我说的没错，你可以尝试使用javascript或jquery。 别忘了链接jQuery

<script type="text/javascript" language="javascript">
$(document).ready(function()
{   
    //minus 150 because > top = 100px, footer = 50px == 150px
    //offsetHeight gives you the height in pixels from the div "wrapper"
    newHeight = document.getElementById('wrapper').offsetHeight - 150;

    //updates the height of the div #middle
    $("#middle").css({'height' : newHeight});
});
</script>

$（文档）.ready（函数（）
{   
//减去150，因为>顶部=100px，底部=50px==150px
//offsetHeight提供div“包装器”的高度（以像素为单位）
newHeight=document.getElementById（'wrapper'）。offsetHeight-150；
//更新div#middle的高度
$（“#中间”）.css（{'height'：newHeight}）；
});

---

它对我有用^^

使用绝对定位和棘手的

溢出：自动
：


html，正文{
身高：100%；
}
#包装纸{
位置：相对位置；
左边距：自动；
右边距：自动；
宽度：500px；
身高：100%；
}
#顶{
高度：100px；
宽度：100%；
背景：蓝色；
}
#中间的{
位置：绝对位置；
底部：50px；
顶部：100px；
溢出：自动；
宽度：100%；
背景：红色；
}
#页脚{
位置：绝对位置；
底部：0px；
高度：50px；
宽度：100%；
背景：绿色；
}

这将保持顶部，具有静态高度。
这将占用所有剩余的高度空间。。。
这保持在底部，具有静态高度
帮助我们帮助您在JSFIDLE上进行实时演示。下面是一个JSFIDLE演示：