Not able to add full height to sidebar - html

Question

I am trying to create a navbar and a sidebar by bootstrap. I have used one row for the navbar and another row for sidebar and content in different columns each. I need my navbar which is in my first column, to expand to the end.
Here is my CSS
.sidebar-col{
background-color: #2c3236;
height: 100% !important;
}
.nopadding{
padding: 0 !important;
}
.sidebar-head{
color: #73ffff;
font-size: 18px;
padding-top: 40px;
margin-left: 15px;
}
.sidebar-un-list{
margin-top: 20px;
padding: 5px;
}
.sidebar-un-list a{
color: antiquewhite;
text-decoration: none;
}
.sidebar-un-list a:hover{
color: rgb(58, 186, 218);
text-decoration: none;
}
.sidebar-list{
padding: 10px;
}
.sub-list{
padding: 10px;
margin-left: 5px;
}
.sub-list a:hover{
color: #73ffff;
}
JSBin for my website.

Answer 1

you can just define sidebar to be full height with little css, exactly with this:
.sidebar-row{
min-height: calc(100vh - 56px);
}
(this 56px is the current header height) .. see example below:
.sidebar-row{
min-height: calc(100vh - 56px);
}
.sidebar-row > *{
border: 1px solid red
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<div class="container-fluid">
<!-- header navbar -->
<header class="row">
<div class="col-md-12 nopadding">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
COMPANY NAME
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">Login</li>
<li class="nav-item">Home</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- sidebar section -->
<section class="row sidebar-row justify-content-start align-items-stretch">
<div class="col-md-2 sidebar-col nopadding">
<!-- <div class="wrapper h-100 my-wrapper"> -->
<nav id="sidebar">
<div class="sidebar-header">
<h6 class="sidebar-head">Functionalities</h6>
</div>
<ul class="list-unstyled components navbar-nav sidebar-un-list">
<li class="active nav-item sidebar-list">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li class="sub-list">
Home1
</li>
<li class="sub-list">
Home2
</li>
<li class="sub-list">
Home3
</li>
</ul>
</li>
<li class="nav-item sidebar-list">
About
</li>
<li class="nav-item sidebar-list">
Contact
</li>
<li class="nav-item sidebar-list">
Help
</li>
<li class="active nav-item sidebar-list">
Home
<ul class="collapse list-unstyled" id="homeSubmenu2">
<li class="sub-list">
Home1
</li>
<li class="sub-list">
Home2
</li>
<li class="sub-list">
Home3
</li>
</ul>
</li>
</ul>
</nav>
<!-- </div> -->
</div>
<div class="col-md-10">
Hello
</div>
</section>
</div>
<!-- container-fluid ends -->