Force Scroll auf Inhalt Element

Question

Ich habe weit und breit gesucht, aber ich kann es nicht auf den Interwebs finden.

Das ist mein Problem.

Ich hätte gerne mein <main> Element, um eine overflow-y:scroll zu haben. Keine Bildlaufleiste auf dem Körper, aber auf der Hauptseite.

Ich habe einen Stift gemacht zu illustrieren: http://codepen.io/magalielinda/pen/rymzBG/

Wie Sie die Scrollbar zeigt sehen können, aber es ist nicht scrollen. Pourquoi? Und wie mache ich es so, dass es scrollt?

Hier ist meine Demo html für diejenigen von Ihnen, dass kann es leicht auf diese Weise mehr beantworten:

<main> 
    <div class="content__container"> 
    </div> 
</main> 

und Demo-CSS:

body { 
    overflow: hidden; 
    height: 100%; 
} 

main, 
.content__container { 
    height: 100%; 
} 

main { 
    overflow-y: scroll; 
    background-color: red; 
    border: 1px solid blue; 
} 

.content__container { 
    max-width: 200px; 
    margin: 0 auto; 
    background-color: aqua; 
    height: 1000px; 
} 

Thanks so much!

UPDATE

ich aus dieser Lösung angepasst. Dies ist das Ergebnis. http://codepen.io/magalielinda/pen/JWyVOM

Answer 1

height: 100% wird 1000px sein, den Inhalt von .content__container aufzunehmen. Wenn Sie main, .content__container, body inspizieren, sind sie alle 1000px groß. So ist der gesamte Inhalt einfach übergelaufen body und Sie haben overflow: hidden auf body eingestellt - keine Bildlaufleiste.

Sie müssen nur die Höhe von main begrenzen, damit es einen Überlauf zum Durchblättern gibt. Wenn Sie stattdessen 100vh verwenden, scrollen die Dinge wie erwartet.

body { 
 
    overflow: hidden; 
 
    height: 100%; 
 
} 
 

 
main { 
 
    height: 100vh; 
 
    overflow-y: scroll; 
 
    background-color: red; 
 
    border: 1px solid blue; 
 
} 
 

 
.content__container { 
 
    max-width: 200px; 
 
    margin: 0 auto; 
 
    background-color: aqua; 
 
    height: 1000px; 
 
}

<main> 
 
    <div class="content__container"> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    foobar<br> 
 
    </div> 
 
</main>

Answer 2

Gib ein max-height auf Ihre Haupt:

main { 
    max-height: 500px; 
} 

http://codepen.io/anon/pen/Mpmvvr