Невозможно добавить всю высоту боковой панели

Question

Я пытаюсь создать панель навигации и боковую панель с помощью bootstrap. Я использовал одну строку для панели навигации и другую строку для боковой панели и содержимого в разных столбцах. Мне нужно, чтобы моя навигационная панель, которая находится в моем первом столбце, развернулась до конца. Вот мой CSS

.sidebar-col{
  background-color: #2c3236;
  height: 100% !important;
}
.nopadding{
  padding: 0 !important;
}
.sidebar-head{
  color: #73ffff;
  font-size: 18px;
  padding-top: 40px;
  margin-left: 15px;
}
.sidebar-un-list{
  margin-top: 20px;
  padding: 5px;
}
.sidebar-un-list a{
  color: antiquewhite;
  text-decoration: none;
}
.sidebar-un-list a:hover{
  color: rgb(58, 186, 218);
  text-decoration: none;
}
.sidebar-list{
  padding: 10px;
}
.sub-list{
  padding: 10px;
  margin-left: 5px;
}
.sub-list a:hover{
  color: #73ffff;
}

JSBin для моего сайта.

Answer 1

вы можете просто определить боковую панель в полную высоту с помощью маленького css, именно так:

.sidebar-row{
  min-height: calc(100vh - 56px);
}

(это 56 пикселей - текущая высота заголовка) .. см. Пример ниже:

.sidebar-row{
  min-height: calc(100vh - 56px);
}
.sidebar-row > *{
  border: 1px solid red
}

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

<div class="container-fluid">

    <!-- header navbar -->
    <header class="row">
      <div class="col-md-12 nopadding">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  
          <a href="#" class="navbar-brand">COMPANY NAME</a>
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarMenu">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item"><a href="#" class="nav-link">Login</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            </ul>
          </div>      
        </nav>
      </div>
    </header>

    <!-- sidebar section -->
    <section class="row sidebar-row justify-content-start align-items-stretch">
      <div class="col-md-2 sidebar-col nopadding">
        <!-- <div class="wrapper h-100 my-wrapper"> -->
          <nav id="sidebar">
            <div class="sidebar-header">
              <h6 class="sidebar-head">Functionalities</h6>
            </div>
            <ul class="list-unstyled components navbar-nav sidebar-un-list">
              <li class="active nav-item sidebar-list">
                <a href="#homeSubmenu" data-toggle="collapse" area-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                  <li class="sub-list">
                    <a href="">Home1</a>
                  </li>
                  <li class="sub-list">
                    <a href="">Home2</a>
                  </li>
                  <li class="sub-list">
                    <a href="">Home3</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item sidebar-list">
                <a href="#">About</a>
              </li>
              <li class="nav-item sidebar-list">
                <a href="#">Contact</a>
              </li>
              <li class="nav-item sidebar-list">
                <a href="#">Help</a>
              </li>
              <li class="active nav-item sidebar-list">
                <a href="#homeSubmenu2" data-toggle="collapse" area-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu2">
                  <li class="sub-list">
                    <a href="">Home1</a>
                  </li>
                  <li class="sub-list">
                    <a href="">Home2</a>
                  </li>
                  <li class="sub-list">
                    <a href="">Home3</a>
                  </li>
                </ul>
              </li>
            </ul>
          </nav>
        <!-- </div> -->
      </div>
      <div class="col-md-10">
        Hello
      </div>
    </section>  
  </div>
 <!-- container-fluid ends -->