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/.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>
<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>