Ganzseitiges Scrollen bis kurz nach Footer

Guten Tag, Es ist eine Webseite mit 4 Links und insgesamt 4 Innenseiten. In "Rezensionen" möchte ich, dass bei über den unteren Rand hinauslaufendem Text mit einem Scrollbalken ganz rechts außen ganzseitig nach unten gescrollt wird, bis die Seite kurz nach dem Footer stoppt. Ähnlich wie bei diesen Blogs hier: https://blog4aleshanee.blogspot.ch/, https://www.favolas-lesestoff.ch/.

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Aufwachen.ch</title> <meta name="keywords" content="Lakhovsky, R. Clark, Wilhelm Reich, Bernd Senf, Kabat-Zinn, Siddhartha Buddha, Lebensenergie, Krebsheilung, Iboga, Tesla, Erfindungen, Elberfelder Bibel, Viktor Schauberger, Nebel Geld, Das Matriarchat, Codex Humanus, Roland Plocher"> <style> *{ margin:0; padding:0; } body { font-size: 100%; display:flex; flex-direction:column; } header { width:100%; height: 247px; background-color: #4e535d; color: white; text-align: center; font-family: "Alien Encounters", Arial, Verdana; font-size: 1.5em; } #header img { margin-top: 75px; } h1 { margin-top: 17px; } .nav { display:flex; list-style-type: none; background-color: #1e1d24; width:75%; margin:0; } nav{ display: flex; justify-content: center; } .nav a { display: inline-block; color: white; font-family: Arial, Verdana, sans-serif; font-size: 120%; text-decoration:none; padding:10px 20px 10px 18px; } .nav li:nth-child(1){ text-align: center; background-color: #4e535d; border-right: 2px solid #4e535d; width:10vw; } .nav li:nth-child(2){ text-align: center; width:40vw; } .nav li:nth-child(3){ text-align: center; border-left: 2px solid #4e535d; border-right: 2px solid #4e535d; width:35vw; } .nav li:nth-child(4){ text-align: center; border-right: 4px solid #4e535d; width:15vw; } </style> </head> <body> <header> <img src="https://gravatar.com/avatar/05985c88be5fa0d7f448e068960452b9?s=80&d=https://codepen.io/assets/avatars/user-avatar-80x80-bdcd44a3bfb9a5fd01eb8b86f9e033fa1a9897c3a15b33adfc2649a002dab1b6.png" alt="Profil"> <h1>AUFWACHEN.ch</h1> </header> <nav> <ul class="nav"> <li><a href="#start">Start</a></li> <li><a href="#bücherverzeichnis">Bücherverzeichnis</a></li> <li><a href="#rezensionen">Rezensionen</a></li> <li><a href="#kontakt">Kontakt</a></li> </ul> </nav> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!