I'm currently working on a sidebar for my website and I'm attempting to make it fill the remaining height of the page after the elements above it. Unfortunately, I haven't been successful in figuring out how to achieve this. I am utilizing Bootstrap 4, but it seems like the issue lies within my CSS code which I will share below.
.sidebar {
float: left;
width: 300px;
height: 100%;
background-color: #212529;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
margin-top: -50px;
margin-bottom: -30px;
}
#sidebar h1, h2, h3, h4, h5, h6 {
color: #fff;
}
#sidebar {
width: 250px;
height: 100%;
z-index: 0;
background: #212529;
transition: all 0.3s
}
#sidebar ul li a {
color: #c3c3c3;
padding: 10px;
font-size: 1.1em;
display: block;
text-decoration: none;
}
#sidebar ul li a:hover {
color: #7386D5;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
The troubled site is actually live at:
You can view all other relevant code there, however, my main concern lies with the sidebar implementation.