title: jquery window resize div height
body: <p>I am trying to resize a div's height when the page change's size.  In my current state it works great on page load.  But when I go to change the browser size it does not work.  If I throw an alert in the script it fires every time the page resizes but won't change the css of the div.</p>
  
  <pre><code>    &lt;div class="row"&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;dddA box full of teddddddddddxt and sometdddhing elsdedd andd else adnd dsomddething besiddeds dddddd dddddd ddd ddd d ddddeddxdtdd andddddd somdddddething else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;A box full of texdt and something else and else and something besiclasss text and something else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;A box full of tdext and something else and else and something besiclasss text and something else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;A box full of tedxt and something else and else and something besides text and something else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;A box full of text and something else and else and something besides text and something else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6 col-sm-6 col-md-4"&gt;
          &lt;div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;"&gt;
              &lt;div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"&gt;&lt;/div&gt;
              &lt;div class="text"&gt;A box full of text and something else and else and something besides text and something else.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery script:</p>
  
  <pre><code>&lt;script&gt;
        $(document).ready(function() {
           var bodyheight = $('.text').height();
           $(".text").height(bodyheight);
       });
  
        $(window).resize(function() {
           function checkWidth(){
           var bodyheight = $('.text').height();
           $(".text").height(bodyheight);     
        }
         checkWidth();
         $(window).resize();
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Is this possible to do and if so how much work on browser is it to use something like this?  Thanks for your help.</p>
  
  <p>Fiddle here:
  <a href="http://jsfiddle.net/g9c41hfv/" rel="nofollow">http://jsfiddle.net/g9c41hfv/</a></p>
  
  <p>Second Fiddle:
  <a href="http://jsfiddle.net/d1a0rv8r/" rel="nofollow">http://jsfiddle.net/d1a0rv8r/</a>  you have to resize screen to start it</p>