Как создать левое меню на 100% высоты с помощью twitter-bootstrap 4.2?

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% при визуализации страницы. Но когда вы нажимаете «Parent - Test» слева, меню переходит в меню div, которое я хочу исправить. Я ожидаю, что левый разделитель будет расширяться по мере расширения его содержимого.

Как я могу заставить левое меню постоянно расширяться на 100% независимо от его содержания?

Я пытаюсь расширить левый разделитель меню для расширения. Как вы можете видеть на скриншоте ниже, список-группа растет больше, чем меню.

Answer 1

Для этого вам нужно убрать классы h-100.Это установит контейнеры на 100% высоты просмотра.Переполнение будет перенесено ниже, вызывая поведение, которое вы видите.

Если вы установите минимальную высоту, она заполнит поле и расширится по мере необходимости.Ниже приведен пример

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

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>


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

    <div class="bg-dark d-none d-md-block side-panel" 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>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <li class="list-group-item">Test</li>
              <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">
      Here is main content....
    </main>
    
  </div>
</div>