60

position: fixedサイドバーとして、レイアウトに div があります。コンテンツの一部を（内部的に）上部に固定し、残りは div の下部からはみ出す場合はスクロールするように求められました。

私はこの回答を見てきましたが、そこに提示された解決策はコンテナでは機能しませんposition: fixed。これは苦痛です。position: absolute

ここで私の問題の JSFiddle デモンストレーションを作成しました。大量のテキストは、理想的には、ページの下部にはみ出さずにスクロールする必要があります。ヘッダーの高さはコンテンツによって異なり、アニメーション化される場合があります。

body {
    background: #eee;
    font-family: sans-serif;
}

div.sidebar {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 280px;
}
div#fixed {
    background: #76a7dc;
    padding-bottom: 10px;
    color: #fff;
}

div#scrollable {
    overlow-y: scroll;
}
<div class="sidebar">
    <div id="fixed">
        Fixed content here, can be of varying height using jQuery $.animate()        
    </div>

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

ヘッダーが固定されていない場合は、単純に追加overflow-y: scrollするだけdiv.sidebarで、コンテンツがコンテナーの下部からはみ出しても、すべてのコンテンツを喜んでスクロールできます。ただし、サイドバーの上部に固定された可変の高さのヘッダーがあり、長すぎてコンテナーに収まらない場合、そのスクロールの下にコンテンツがあるという問題が発生しています。

div.sidebar とどまる必要position: fixedがあり、ハックなしでこれを行い、可能な限りクロスブラウザにしたいと考えています。いろいろ試してみましたが、どれもうまくいかず、ここから何を試せばいいのかわかりません。

position: fixedコンテナー内の div を Y 方向にのみスクロールさせるにはどうすればよいですか? 私はJSから離れたいと思っていますが、JSを使用する必要がある場合は使用します.

4

5 に答える 5

85

使えば使えそうです

div#scrollable {
    overflow-y: scroll;
    height: 100%;
}

に追加padding-bottom: 60pxしdiv.sidebarます。

例: http://jsfiddle.net/AKL35/6/

ただし、なぜそうでなければならないのかはわかりません60px。

fまた、あなたはからを逃しましたoverflow-y: scroll;

于 2012-04-14T17:14:15.303 に答える
1

スクロール可能なdivを絶対位置に変更しましたが、すべてうまくいきました

div.sidebar {
    overflow: hidden;
    background-color: green;
    padding: 5px;
    position: fixed;
    right: 20px;
    width: 40%;
    top: 30px;
    padding: 20px;
    bottom: 30%;
}
div#fixed {
    background: #76a7dc;
    color: #fff;
    height: 30px;
}

div#scrollable {
    overflow-y: scroll;
    background: lightblue;

    position: absolute;
    top:55px; 
    left:20px;
    right:20px;
    bottom:10px;
}

2 つのスクロール可能な div を含むデモ

于 2014-04-30T16:05:49.783 に答える
-1

スクロール可能な div を設定して、そのプロパティmax-sizeに追加overflow-y: scroll;します。

編集: jsfiddle を機能させようとしていますが、適切にスクロールしていません。これを理解するには時間がかかります。

于 2012-04-14T15:00:28.730 に答える