I'm struggling to make the navigation bar stretch to full height.
As a beginner in HTML and CSS, I have limited knowledge about it. I have tried numerous solutions found on the internet but nothing seems to work. The styling and HTML code are provided below. I have set all parent containers to full height but the issue persists. I obtained the style from the internet and I understand most of its functions.
body,
html {
height: 100vh;
}
div {
overflow: hidden;
height: 100%;
position: relative;
background-color: aqua;
}
nav {
display: block;
text-align: center;
height: 100vh !important;
float: left;
position: absolute;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
height: unset !important;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
/* Remaining CSS code omitted for brevity */
<div>
<nav>
<ul class="nav">
<li><a href="#">About</a></li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li>
<a href="#">Resume</a>
<ul>
<li><a href="#">item a lonng submenu</a></li>
<li>
<a href="#">item</a>
<ul>
<li><a href="#">Ray</a></li>
<li><a href="#">Veronica</a></li>
<li><a href="#">Bushy</a></li>
<li><a href="#">Havoc</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Download</a></li>
<li>
<a href="#">Rants</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>