如何使用twitter-bootstrap 4.2在100％的高度创建左侧菜单？

Question

我正在尝试使用顶部导航栏和折叠的左侧菜单创建布局。

此外，左侧菜单将在中等尺寸或更小的屏幕上隐藏。但是，无论菜单的实际大小如何，左侧菜单都需要始终占据页面的整个高度。

这是我的代码

<div class="container-fluid h-100 mh-100 no-gutters pl-0">
  <div class="d-flex h-100">

    <div class="bg-dark h-100 mh-100 d-none d-md-block" style="min-width: 18rem; max-width: 22rem;">

      <ul class="list-group p-2">
        <li class="list-group-item">
          <a href="#" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Parent - Test</a>


            <ul class="list-group collapse" id="multiCollapseExample2">
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
            </ul>

          </li>
      </ul>
    </div>

    <main role="main" class="flex-grow-1 pl-3 h-100 mh-100">
      Here is main content....
    </main>

  </div>
</div>

这里是我的代码https://jsfiddle.net/7fcahme8/的提琴手

如您所见，呈现页面时，左侧菜单的高度为100％。但是，当您单击左侧的“父母-测试”时，菜单会移到菜单div上，这是我要修复的问题。我期望左分隔符随着内容的扩展而扩展。

如何使左侧菜单始终扩展100％？

我正在尝试扩展左侧菜单分隔线以进行扩展。正如您在下面的屏幕快照中所看到的，列表组的增长超过了菜单。

Answer 1

要实现此目的，您需要删除h-100类。这样可以将容器固定到视图高度的100％。溢出将包裹在下面，从而导致您看到的行为。

如果您设置了最小高度，它将填充are并根据需要扩展。下面是一个示例

vault kv put kv/my-secret my-value=yea

html, body {
  height: 100%;
  min-height: 100%;
}

.side-panel{
  min-height: calc(100vh - 56px); /* 100% view height - 56px (navbar height) */
}