1

私は固定フッターとヘッダーを備えたレイアウトを持っています。私が望むのは、「情報ボックス」の div を可変の高さにし、「scrolling-div」で右側の列の残りの垂直方向の高さを埋めることです。この fiddleからわかるように、scrolling-div の高さを 100% に設定すると、残りのスペースではなく、右側の列と同じ高さになります。

このページの HTML は次のとおりです。

<body>
    <div id="header">
    </div>
    <div id="main-container">
        <div id="page-content">
        <div id="left-column">
        </div>
        <div id="right-column">
            <div id="info-box">
            This is a variable height div</div>
            <div id="scrolling-div">
                Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br /> Loads and loads of scrolling content<br /><br />

            </div>
        </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>

これはCSSです：

body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#header {
    position:fixed;
    height:45px;
    width:100%;
    background-color:#FF0000;
    top:0;
}

#footer {
    position:fixed;
    height:45px;
    width:100%;
    background-color: #FF00FF;
    bottom:0
}

#main-container {
    background:#00FF00;
    position:absolute;
    top:45px;
    bottom:45px;
    width:100%
}

#page-content {
    width:960px;
    position:relative;
    margin: 0 auto;
    background-color:#FFF000;
    height:100%;
}

#left-column {
    background-color:#444444;
    width:400px;
    height:100%;
    float:left;
}

#right-column {
    background-color:#0000FF;
    float:right;
    width:560px;
    z-index:10000;
    height:100%;
}

#info-box {
    width:100%;
    height:200px;
    background-color:#0F0F0F;
    color: #FFFFFF;
}
#scrolling-div {
   background-color:#FFFFFF;
    height:200px;
    overflow:scroll;
}

繰り返しますが、実際の動作を確認するためのフィドルへのリンクです。

ご協力いただきありがとうございます！

4

1 に答える 1

1

これを行うには、JS の策略に頼る必要があるかもしれません。CSS で使用することを考えていましたが、高さが可変になることにcalc()気付きました。#info-boxjQuery の単純な行を使用して、#scrolling-divの高さを親コンテナの高さから兄弟の高さを引いた値に設定できます。

$(document).ready(function() {
   $("#scrolling-div").height($("#right-column").height()-$("#info-box").height());
});

この設定を将来的に保証したい場合 (コンテナに複数の兄弟がある場合など)、代わりに次の関数を使用できます。

$(document).ready(function() {
    // Define some variables
    var $sdiv = $("#scrolling-div"),
        sibHeight = 0;

    // Get sum of siblings height
    $sdiv.siblings().each(function() {
       sibHeight += $(this).height(); 
    });

    // Set own height to parent's height - sum of siblings height
    $sdiv.height($sdiv.parent().height()-sibHeight);
});

を使用する代わりに、代わりに使用overflow: scrollすることをお勧めしoverflow-y: autoます;)

ここで編集されたフィドルを参照してください - http://jsfiddle.net/teddyrised/2qXZG/

于 2013-02-27T21:55:05.197 に答える