javascript - 侧边栏不会强制触摸父 Div 的底部

Question

我有一个 Bootstrap 侧边栏。它的工作和设计都很好，但是无论我尝试过什么，我都无法弄清楚如何强制侧边栏的高度加长直到它触及父级的底部。 You can see it on Fiddle ,(请拉伸(stretch) View 使其等于中屏)

我试过类似的东西

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

尝试使用 Javascript 获取父 div 的高度并操作侧边栏是唯一的方法吗？

---

完整 block :

<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