web-dev-qa-db-ja.com

固定位置コンテナのコンテンツの一部をスクロールします

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

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

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

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.sidebarmustposition: fixedにとどまり、ハックせずにこれをやりたいです。可能な限りクロスブラウザ。私はさまざまなことを試みましたが、どれも機能せず、ここから何を試すべきかわかりません。

position: fixedコンテナ内のdivを、コンテンツが含まれるdivからオーバーフローするときにY方向にのみスクロールし、さまざまな不定の高さの固定ヘッダーを使用するにはどうすればよいですか？私はJSに近づかないようにしたいのですが、もしそれを使わなければならないなら、私はそうします。

cssoverflow
58
Bojangles

使用するとうまくいくようです

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

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

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

ただし、60pxである必要がある理由はわかりません。

また、overflow-y: scroll;からfを見逃しました

84
FrogInABox

私のために働いたもの：

div#scrollable {
    overflow-y: scroll;
    max-height: 100vh;
}
2
Julien

スクロール可能な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を持つデモ

1
Dmitri Algazin

実際、これはそれを行うより良い方法です。 height: 100%が使用されている場合、コンテンツは境界から外れますが、95%である場合、すべてが順序どおりになります。

div#scrollable {
    overflow-y: scroll;
    height: 95%;
}
0
Vasil