2

固定位置のサイドバーがあるページがあります。コンテンツが高すぎてブラウザウィンドウに収まらない場合に備えて、サイドバーをスクロールできるようにしたいと思います。

ただし、サイドバーをでスタイル設定するとoverflow-y: scroll、スクロールバーは表示されますが、ブラウザウィンドウには高すぎるにもかかわらず、サイドバーはすべてのコンテンツを保持するのに十分な高さであるため、無効になっています。

コンテンツがブラウザウィンドウの下部より下に拡張されたときにスクロールするように、固定位置要素の高さを制限する方法はありますか？

私のアプリケーションでは、jQueryソリューションを使用できます。サイドバーがウィンドウの上部まで伸びていないことに注意してください。

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2：このバージョンにはヘッダーが表示され、サイドバーは下に表示される必要があります。

4

1 に答える 1

5

サイドバーの高さを設定する必要があります。現在、サイドバーはテキストブロックと同じ高さで、ビューポートの下を走っています（ただし、それは表示されません）。高さを100％（または他の何か）に設定すると、すべてのコンテンツを一度に表示できない場合、サイドバーにスクロールバーが表示されます。

したがって、これを変更する必要があります。

div#fixed-div {
    position: fixed;
    left: 0;
    top 80px;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

これに：

div#fixed-div {
    position: fixed;
    left: 0;
    top 80px;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
    height: 100%;
}

編集：

ブラウザーを最大限にサポートするソリューション（古いブラウザーでも）が必要な場合は、JavaScriptが必要です。jQueryに依存するソリューションは次のとおりです。

CSS：

* {
  margin: 0;
  padding: 0;
}

html, body {
    height: 100%;
}

div#header-div {
    height: 90px;
    background-color: lime;
}
div#fixed-div {
    position: fixed;
    width: 260px;
    background-color: silver;
    overflow-y: scroll;
}

JavaScript：

var bodyHeight = $('body').height();
var headerHeight = $('#header-div').height();
var sidebarHeight = bodyHeight - headerHeight;

$('#fixed-div').height(sidebarHeight);

動作中のJSFiddle：http: //jsfiddle.net/nH7xR/

于 2013-03-26T21:36:02.047 に答える