创建一个始终适合的可重用垂直导航栏

Question

我想创建一个辅助垂直导航栏组件，可以传递到任何div，它会自动从上到下填充它，有一些固定的宽度

像这样的东西（在topnav下显然无法正常工作）

我的尝试：

<div class="context-menu">
    <div class="">
      <ul class="menu">
        {{#each state$items}}
          <li class=""><a href=""><i class="{{icon}}"></i> {{text}}</a></li>
        {{/each}}
      </ul>
    </div>
  </div>

.context-menu {
  position: fixed;
  bottom: 0px;
  top: 0px;
  background: @gray-dark;

  @media (min-width: 768px) {

    width: @secondary-sidebar-width;

    .navbar-nav li {
      float: none !important;
    }
  }
}

但是可以看出，这不能正常运作。我怎样才能确保它始终适合放在里面的div？