侧边栏不强制触摸父 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 的高度并操作侧边栏的唯一方法吗？

---

完整块：

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

更新小提琴：https://jsfiddle.net/DTcHh/25305/

Answer 1

如果父级设置了高度，则子级可以使用height:100% 将其扩展到相同的高度。然后你可以让孙子height:100% 做同样的事情。

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

jsFiddle