it-swarm.com.de

Blättern Sie einen Teil des Inhalts in einem Container mit fester Position

Ich habe einen position: fixed div in einem Layout als Sidebar. Ich wurde gebeten, einen Teil des Inhalts an der Oberseite (intern) festzuhalten, und der Rest sollte scrollen, wenn er am unteren Rand des div überläuft.

Ich habe einen Blick auf diese Antwort geschaut, allerdings funktioniert die dort vorgestellte Lösung nicht mit position: fixed- oder position: absolute-Containern, was sehr schmerzhaft ist.

Ich habe eine JSFiddle-Demonstration meines Problems hier gemacht. Die große Menge an Text sollte idealerweise einen Bildlauf durchführen, anstatt über den unteren Rand der Seite zu fließen. Die Höhe der Kopfzeile kann mit dem Inhalt variieren und kann animiert werden.

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>

Ohne einen festen Header kann ich einfach overflow-y: scroll zu div.sidebar hinzufügen, und ich kann den Inhalt des Inhalts blättern, wenn er den Boden des Containers überläuft. Ich habe jedoch Probleme mit einer festen Kopfzeile mit variabler Höhe oben in der Seitenleiste und mit beliebigem Inhalt unter dieser Bildlaufleiste, wenn sie zu lang ist, um in den Container zu passen. 

div.sidebarmust bleibt position: fixed, und ich würde dies sehr gerne ohne jegliche Hacks tun und es so möglich machen, es so über einen Browser zu ziehen. Ich habe verschiedene Dinge ausprobiert, aber keine davon funktioniert, und ich bin nicht sicher, was ich von hier aus versuchen sollte.

Wie kann ich ein div innerhalb eines position: fixed-Containers nur in Y-Richtung scrollen lassen, wenn der Inhalt das enthaltende div mit einem festen Header mit variabler, unbestimmter Höhe überläuft? Ich würde mich sehr gerne von JS fernhalten, aber wenn ich es benutzen muss, werde ich es tun.

54
Bojangles

Es scheint zu funktionieren, wenn Sie verwenden

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

und füge padding-bottom: 60px zu div.sidebar hinzu. 

Zum Beispiel: http://jsfiddle.net/AKL35/6/

Ich bin mir jedoch nicht sicher, warum es 60px sein muss.

Sie haben auch die f von overflow-y: scroll; verpasst. 

82
FrogInABox

Was für mich funktioniert hat:

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

Ich habe das scrollbare div so geändert, dass es eine absolute Position hat, und alles funktioniert für mich

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;
}

DEMO mit zwei scrollbaren Divs

1
Dmitri Algazin

Eigentlich ist das der bessere Weg. Wenn height: 100% verwendet wird, geht der Inhalt vom Rand aus, aber wenn 95% ist, ist alles in Ordnung:

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