title: How to resize an element to full viewable height
body: <p>I'm attempting to make a div that resizes to full page height, between a header and a footer. I don't want there to be any scrolling on the page, I've looked around and can't find a solution that has worked for me.</p>
  
  <p>Here is a picture of my webpage.</p>
  
  <p><a href="https://i.stack.imgur.com/qigIC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qigIC.png" alt="enter image description here"></a></p>
  
  <p>I want the black bordered box to expand all the way down to the drawn red line, no matter the zoom ratio on the browser. Obviously width already works, but I cannot for the life of me get height.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="row" style="height:100%;"&gt;
      &lt;div class="col-md-2" style="border:1px solid black;"&gt;
          &lt;div class="panel panel-success"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Links&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  Panel content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-10" style="border:1px solid black"&gt;
          &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;Viewer&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  Panel content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>