title: Re-size a div style respect to browser window width and height - Jquery
body: <p>I'm trying to change browser width and height into <code>.test</code> div. whenever I re-size the browser the current value should change.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(
    function() { 
  
      window.onresize = function(event) {
        resizeDiv();
      }
  
      function resizeDiv() {
        var vpw=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var vph=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;
        $(‘.test’).css({‘height': vph + ‘px’});
      }
                 
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.test
  {
    background: green;
    padding: 20px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="test"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>