title: How to set content of panel to 100% of the panel body
body: <p>I am sure this was asked before I just cant mange to find it.</p>
  
  <p>Using a bootstrap panel that is 100% the height of a window, I want the content of the panel .mybox to stretch 100%</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="content"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Map&lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div class="mybox"&gt; &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  html, body {
        height: 100%;
        width: 100%;
    }
    .content {
        height: 100%;
    }
     .panel {
        height: 100%;
    }
    .panel-body {
        height: 100%;
    }
    .mybox {
        background-color: black;
        height: 100%;
        width: 100%;
    }
  </code></pre>
  
  <p>But the result is that mybox overflows the border of the panel: see this plunker <a href="http://plnkr.co/edit/rDycxKTFJ8HF2efNhYFl" rel="nofollow noreferrer">http://plnkr.co/edit/rDycxKTFJ8HF2efNhYFl</a></p>
  
  <p><img src="https://i.stack.imgur.com/cOJO0.png" alt="enter image description here"></p>
  
  <p>I tried playing with the panel padding/margin but setting the bottom to 0 or -5 but dont know how to get the black box to stay inside the panel at 100%, also tried setting the overflow to hidden.</p>
  
  <p>Is there something obvious that I am missing here?</p>