0

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 のデモ

4

2 に答える 2

2

絶対配置とトリッキーを使用して、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>

注 : IE7 ではサポートされていないwidth: 100%;の代わりに使用します。width: inherit;

于 2012-08-22T09:10:53.633 に答える
0

うーん、私が正しければ、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>

それは私のために働いた^^

于 2012-08-22T09:06:28.700 に答える