senty senty - 1 year ago 80
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:

Answer Source

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download