Making lateral menu take 100% height with 100vh when scrolling down the page

Question

I'm currently stuck, I'm trying to make a div take 100% height with 100vh (position fixed is not an option). It works, but only for the active window, when we scroll, the div stop taking 100% height.

I've searched on the other topics, and I tried min-height : 100vh, also tried put position relative and min-height: 100% on html and body tags, but it doesn't work for me.

Maybe I have to specify that I'm using bootstrap 3.

HTML

<div id="bel-menu" class="col-sm-3 col-md-2 col-lg-2">
  <ul id="custom-menu" class="nav nav-pills nav-stacked" role="menu" aria-labelledby="dropdownMenu">
    <li role="presentation" class="groupe-icon dropdown-submenu main-menu">
      <div class="blue-bar"></div>
      <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Groupe</a>
      <div class="menu-arrow"></div>
      <ul class="dropdown-menu secondary-menu">
        <li class=""><a href="">Groupe</a></li>
        <li class=""><a href="">Mission</a></li>
        <li class=""><a href="">Marques et produits</a></li>
        <li class=""><a href="">Engagements</a></li>
        <li class=""><a href="">Temps forts</a></li>
        <li class=""><a href="">Implantations</a></li>
        <li class=""><a href="">Bel dans le monde</a></li>
        <li class=""><a href="">Finance</a></li>
        <li class=""><a href="">Gouvernance</a></li>
        <li class=""><a href="">Présenter Bel</a></li>
      </ul>
    </li>
    <li class="workplace-icon dropdown-submenu main-menu">
      <div class="blue-bar"></div>
      <a href="">Workplace</a>
      <div class="menu-arrow"></div>
    </li>
    <li class="documents-icon dropdown-submenu main-menu">
      <div class="blue-bar"></div>
      <a href="">Documents</a>
      <div class="menu-arrow"></div>
    </li>
    <li class="moi-chez-bel-icon dropdown-submenu main-menu">
      <div class="blue-bar"></div>
      <a href="">Moi chez Bel</a>
      <div class="menu-arrow"></div>
    </li>
    <li class="applications-icon dropdown-submenu main-menu">
      <div class="blue-bar"></div>
      <a href="">Applications</a>
      <div class="menu-arrow"></div>
    </li>
  </ul>
  <div class="col-sm-3 col-md-2 col-lg-2 nopad open-btn">
    <div class="arrow-icon"></div>
  </div>
</div>

CSS

#bel-menu {
    height: 100vh;
    padding: 0;
    background-color: #333;
}

Take a look to my project : https://jsfiddle.net/e94wewad/

The div I'm talking about is the one, that is containing the lateral menu. The menu is taking 100% of the viewport, but when I scroll down, it stops.