Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<style>
body {
marge: 0;
}

ul {
type-de-liste: aucun;
marge: 0;
padding: 0;
largeur: 130px;
couleur de fond: #f1f1f1;
position: fixe;
hauteur: 100%;
débordement: auto;
}

li a {
afficher: bloc;
couleur: noir;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
couleur de fond: #D74444;
couleur: blanc;
}

li a:hover:not(.active) {
couleur de fond: #555555;
couleur: blanc;
}
</style>
</head>
<body>

<ul>
 <li><a class="active" href="#home">Accueil</a></li>
 <li><a href="#news">Actualités</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">À propos</a></li>
</ul>

<div style="margin-left:130px;padding:1px 16px;height:1000px;">
 <h2>Navbar verticale pleine hauteur</h2>
 <h3>Essayez de faire défiler cette zone et voyez comment la barre latérale reste fixée à la page.</h3>
 Remarquez que nous avons défini overflow:auto pour sidenav. Cela ajoutera une barre de défilement lorsque sidenav est trop long (par exemple, s'il contient plus de 50 liens à l'intérieur).
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
 Certain texte..
</div>

</body>

</html>