senty senty - 2 months ago 5
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>
</ul>
</div>
</div>
</div>

<style>
.nav-sidebar {
background-color:lightgray;
height: 100%;
}

.container-fluid {
height: 500px;
}
</style>


Updated Fiddle: https://jsfiddle.net/DTcHh/25305/

Answer

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%;
}

jsFiddle

Comments