3

上部にヘッダー、左側にサイドバー、右側にメインコンテンツ領域があるページがあります。簡略化されたバージョンはhttp://jsbin.com/iqibew/3で見ることができます。

position: fixedサイドバーには、ページの残りの部分と一緒にスクロールしないようにスタイルが設定されています。これは機能しますが、コンテンツが長すぎて収まらない場合は、サイドバー自体もスクロールする必要があります。

これは、サイドバーに正しい高さを設定できる場合にのみ可能です。しかし、この高さを設定する方法が見つかりません。100％は近いですが、サイドバーがヘッダーの下から始まるため、高すぎます。

これに対処する方法はありませんか。私はCSSまたはJavaScript/jQueryソリューションのいずれかを受け入れています。

4

2 に答える 2

7

うまくいくように見えるので、これを投稿すると思います。

div#header-div {
    height: 90px;
    background-color: lime;
    margin: 0;
}
div#fixed-div {
    position: fixed;
    left: 0;
    top: 0;            /* <<< No offset */
    bottom: 0;         /* <<< Pull to the bottom for height */
    margin: 120px 0 0; /* <<< Give it the 120px top */
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

http://jsbin.com/iqibew/13/

于 2013-03-27T01:40:17.590 に答える
1

divのサイズを好きなサイズにしたい場合は、オプションがあります

//これを<head>セクションに追加します。サンプルには含まれていないと思います

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"  >
</script>

      <script type="text/javascript"  >
$(document).ready(function() {

function _resizeTDiv()
{
   var p = $("#header-div");
   var position = p.position();
   var realheight = p.position().top+p.height();
 $("#fixed-div").height( $(document).height()-realheight -5); //+-5 Error? , not needed
}
 _resizeTDiv();

//Resize  our div on window resize?
$(window).resize(function() {
 _resizeTDiv();
});

});

</script>
于 2013-03-27T01:34:56.580 に答える