Archiv-Modus von Basti1012 Lösungspage

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/.

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>
  <style>
    *{
    margin:0;
  padding:0;
}
body {
 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;
width:70px;
height:70px;
}

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="/image/forum-4b225c.svg" 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>

basti1012.bplaced.net

Ganzseitiges Scrollen bis kurz nach Footer

Code