100高度div元素之間2靜態高度

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 demo

Answer 1

使用可以使用絕對定位和棘手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> 

它爲我^^