Barra de navegación vertical fija de altura completa

CSS

Barra de navegación vertical fija de altura completa

Veamos un ejemplo de como crear una barra de navegación vertical fija con altura completo. El código es el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
body {
margin: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

li a {
display: block;
color: #000;
padding: 8px16px;
text-decoration: none;
}

li a.active {
background-color: #04aa6d;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="#"class="active">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Donde estamos</a></li>
<li><a href="#">Cont</a></li>
</ul>
</body>
</html>

El resultado es el siguiente

Sutil Web
Sutil Web - Tu sueño hecho diseño

Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt mauris interdum convallis metus suspendiss lacus est.