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

边栏不会强制触摸父Div

1 个答案: