Боковая панель не вынуждает касаться нижней части родителя Div

Question

У меня есть боковая панель ботстрапа. Он отлично работает, но, как бы я ни старался, я не мог понять, как заставить высоту боковой панели удлиняться, пока она не коснется нижней части родителя. You can see it on Fiddle, (пожалуйста, растягивать вид, чтобы сделать его равным средней экране)

Я попытался вещи, как

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

Является единственным способом пытается получить высоту родительского DIV с помощью JavaScript, и манипулировать врезку?

---

Полный кусок:

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

Обновлена ​​Fiddle: https://jsfiddle.net/DTcHh/25305/

Answer 1

Если родительский набор высоты, то ребенок может использовать height:100%, чтобы развернуть его на ту же высоту. И тогда вы можете сделать внука height:100% сделать то же самое.

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

jsFiddle