senty senty - 1 month ago 4
Javascript Question

Sidebar Doesn't Force to touch bottom of the parent Div

I have a bootstrap sidebar. It works and designs nicely, however whatever I tried, I couldn't figure out how to force the height of the sidebar to lengthen until it touches the bottom of the parent. You can see it on Fiddle, (please stretch the view to make it equal to medium screen)

I tried stuff like

.sidebar {
height: 100%;
bottom: 0;
height: 600px // works but I don't want to give it static

Is the only way trying to get the height of parent div using Javascript and manipulate sidebar?

Full chunk:

<div class="container-fluid" style="background-color:green">
<div class="row row-offcanvas row-offcanvas-left active">
<div class="col-md-2 sidebar-offcanvas">
<ul class="nav nav-sidebar">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>

.nav-sidebar {
height: 100%;

.container-fluid {
height: 500px;

Updated Fiddle:


If the parent has a height set, then the child can use height:100% to expand it to that same height. And then you can make the grandchild height:100% to do the same.

.sidebar, .sidebar-offcanvas, .row-offcanvas {
  height: 100%;