Volle Höhe Seitenleiste über Inhalt in einem Wrapper

Question

Ich habe ein Projekt mit Bootstrap 3, wo ich eine Seitenleiste über die Abschnitte mit Inhalt platzieren muss, aber unter Berücksichtigung der Breite des .container Wrapper. Die Seitenleiste muss die gesamte Seitenhöhe ausfüllen und scrollbar sein.

Dieses JSFiddle (Link in Kommentaren, da ich noch nicht mehr als 2 Links posten kann) zeigt die Struktur, die ich habe, mit ihren Stilen. Sie können das Problem dadurch sehen, dass Sie mit der Höhe des HTML-Frames in JSFiddle spielen, sodass sie kleiner als die Seitenhöhe ist.

besser zu veranschaulichen, zeigen diese Bilder die Seitenleiste in blau, alle Seitenhöhe Füllung, in allen Fällen:

• Case 1: Die Abschnitte sind größer als das Ansichtsfenster; die Seitenleiste folgt der Körpergröße
• Case 2: die Abschnitte nicht die ganze Seite füllen, aber die Sidebar tut

Hinweis: Es ist wichtig, dass die Seitenleiste die Breite .container folgt. Der Inhalt unten ist nicht, es ist volle Breite und teilweise sichtbar.

Bonus: in Fall 2, sollte der Abschnitt voller Höhe als gut

Ich habe versucht, die mehr Details konnte ich geben, aber ich kann keine weiteren Informationen zur Verfügung stellen.

Ich weiß, dass es durch Skript möglich ist, aber ich würde es vorziehen, nur CSS

Answer 1

Es ist ziemlich schwer mit mit Mehr Details zu helfen. Aber ich ging voran und machte diese Geige, die eine 100% Höhe farbigen Hintergrund mit Ihrem Markup hat: https://jsfiddle.net/stevenng/8xdfosf6/

.container { 
    width: 100%; 
} 
.sidebar { 
    background: #bada55; 
    float: left; 
    width: 25%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 

.sections { 
    background-color: #b000b5; 
    width: 75%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 

hoffe, das hilft!