title: how to change bootstrap panel height's to equal the body height's
body: <p>trying to change <code>bootstrap</code> <code>panel</code> <code>height</code>'s to be <code>equal</code> the <code>body</code> <code>height</code>'s</p>
  
  <p>so to be like side bar :</p>
  
  <pre><code>    &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-2"&gt;
              &lt;div class="panel panel-primary "&gt;
                  &lt;div class="panel-heading"&gt;Welcome User!&lt;/div&gt;
                  &lt;div class="panel-body client-left-side"&gt;
                      Cpanel Menu
                  &lt;/div&gt;
                  &lt;div class="panel-footer"&gt;Logout Button&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>result :</p>
  
  <p><img src="https://i.stack.imgur.com/VkLzg.png" alt="enter image description here"></p>
  
  <p>I want to stretch it , so it's <code>height</code> from the end of the <code>navigation bar</code>till the beginning of the <code>footer</code>...</p>
  
  <p>EDIT:  <a href="http://abanoub.me/bebrand/test" rel="nofollow noreferrer">link to the test page</a></p>