div元素上2个静态高度之间的100%高度

Question

我正在尝试使div具有100%的高度。这总是让人头疼。。。我希望我的#wrapper是100%，我的#middle也是。。

<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>

JsFiddle演示

Answer 1

Use可以使用绝对定位和棘手的overflow: auto:在没有JS的情况下使用

html, body {
    height: 100%; 
}
#wrapper {
    position: relative;
    margin-left:auto; 
    margin-right:auto; 
    width:500px;
    height: 100%;
}
#top {
    height: 100px;
    width: 100%;
    background: blue;
}
#middle {
    position:absolute;
    bottom: 50px;
    top: 100px;
    overflow: auto;
    width: 100%;
    background: red;
}
#footer {
    position:absolute;
    bottom: 0px;
    height:50px;
    width: 100%;
    background: green;
}

<div id="wrapper">
    <div id="top">
        This stays top, with static height.
    </div>
    <div id="middle">
        This should take all space that is left in height...
    </div>
    <div id="footer">
        This stays in bottom, with static height
    </div>
</div>

注意：使用width: 100%;而不是width: inherit;，这是IE7 不支持的

Answer 2

Uhmm如果我是正确的，您可以尝试使用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>

它对我有效^^