title: Expand a div to full screen
body: <p>I am using bootstrap 3 and jQuery. I have a div on my page right now that is 500 x 400 and it is sitting inside of a bootstrap row and col div. for example: </p>
  
  <pre><code> &lt;div class="row"&gt;
        &lt;div class="col-lg-12"&gt;
             &lt;div id="myDiv"&gt;&lt;/div&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want to use jQuery to tell this div to go full screen. When I click on my button to make it go full screen it seems to be locked inside of the bootstrap row and goes to 100% x 100% inside of the parent div. Is there anyway to tell #myDiv to eject from the parent that it is in and go full screen. </p>
  
  <p>My css: </p>
  
  <pre><code> #myDiv{
      z-index: 9999; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      top: 0; 
      left: 0; 
   }
  </code></pre>