title: how to change div heights based on resize with scrolling included
body: <p>I've run into an issue where I need 2 divs height to fill up the screen based on resize no matter what the browser dimensions/resolution etc with scrolling included.</p>
  
  <p>Right now without javascript it takes the height based on the body,html with min-height. Which is great! Except when you resize to a smaller size and then scroll downwards. You end up with whitespace. 
  For this example I have two divs side by side. Both 50%. Column1 is with black background color, and Column2 is with a white background color. I've gone and added some javascript and every-time I resize it just keeps adding extra height and the scrollbar becomes incredibly large. </p>
  
  <p>Image one shows it regular. 
  <img src="https://i.imgur.com/Xyqr14F.png" alt="image1">
  Image two shows it after resizing a little bit. A ton of extra height is added. notice the scrollbar
  <img src="https://i.imgur.com/ShYKWvW.png" alt="image2"> </p>
  
  <p>Below is my code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div id="panelWrapper"&gt;
        &lt;div id="column1"&gt;
        &lt;/div&gt;
        &lt;div id="column2"&gt;
        &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body, html { 
  margin:0;
  padding:0;
  min-height:100%;
  height:100%;
  }
  
  #panelWrapper {
  width:100%;
  position: absolute;
  }
  
  #column1{
  position:absolute;
  width:50%;
  left:0;
  right:0;
  top:0;
  bottom:0;
  min-width: 481px;
  background-color: #000000;
  }
  
  #column2{
  position:absolute;
  width:50%;
  left:50%;
  right:0;
  top:0;
  bottom:0;
  background: #FFFFFF;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  z-index: 999;
  min-width: 481px;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var bodyheight = $(document).height();
  $("#column1, #column2").height(bodyheight);
  
  $(window).resize(function() {
  var bodyheight = $(document).height();
  $("#column1, #column2").height(bodyheight);
  });
  </code></pre>