Although this question has been asked before, the previous answer did not work for me. (100vh was suggested as a solution).
My goal is to extend the vertical navbar all the way to the bottom of the page. I have tried several different approaches but none of them seem to make it reach the bottom.
The code snippet labeled .rectangle is an attempt to draw a rectangular box that extends down the entire page. However, I faced the same issue with the rectangle as I did with the vertical navbar - it doesn't reach the bottom.
The .navContainer and .verticalNavBar are the initial codes I started with before experimenting with the rectangular box.
I am seeking assistance in identifying where the problem lies.
Here is the relevant code from the HTML and CSS files:
}
.navContainer {
box-sizing: border-box;
margin-left: 0%;
margin-right: 15%;
margin-bottom: 0%;
background-color: grey;
}
.verticalNavBar {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 15%;
background-color: grey;
position: absolute;
min-height: 100%;
overflow: auto;
}
.liVerNavBar a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}<body>
<div class="rectangle"></div>
<nav class="navContainer">
<ul class="verticalNavBar">
<li class="liVerNavBar"><a href="Final_HomePage.html"><h2>Home</h2></a></li>
<li class="liVerNavBar"><a class="active" href="Final_Resources.html"><h2>Resources</h2></a></li>
<li class="liVerNavBar"><a href="Final_Medications.html"><h2>Medications</h2></a></li>
<li class="liVerNavBar"><a href="Final_RequestMoreInfo.html"><h2>Request More Information</h2></a></li>
</ul>
</nav>This is how the layout appears with the current code: Vertical navbar stops short of bottom
Even after changing .verticalNavBar so that it includes min-height: 100vh;
.verticleNavBar {
list-style-type: none;
margin: 0%;
padding: 0%;
width: 15%;
background-color: grey;
position: absolute;
min-height: 100vh;
overflow: auto;
}the issue persists. When I updated .navContainer with min-height: 100vh;
.navContainer {
box-sizing: border-box;
margin-left: 0%;
margin-right: 15%;
margin-bottom: 0%;
background-color: grey;
min-height: 100vh;
}the grey box around the navbar expands, almost taking up the full width of the screen.
Navbar taking up the width of the screen
Thank you for the responses provided thus far, but unfortunately, they have not resolved the navbar issue.