html - 2 个静态高度之间的 div 元素的 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

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

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

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

它对我有用^^