サイドバーは親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 
} 

ようなものを試してみましたJavascriptを使用して、親のdivの高さを取得し、サイドバーを操作しようとしている唯一の方法ですか？

---

全チャンク：親は高さが設定されている場合、その子が同じ高さにして展開しheight:100%を使用することができますhttps://jsfiddle.net/DTcHh/25305/

Answer 1

：

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

はフィドルを更新しました。そして、あなたは同じように孫のheight:100%を作ることができます。

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

jsFiddle