title: jQuery div to fill viewport and resize not working
body: <p>I'm using this jQuery to get the size of the viewport and set the div to this size:</p>
  
  <pre><code>    $("#hero").height($(window).height());
         $(window).resize(function(){
            $("#hero").height($(window).height());
      });
  </code></pre>
  
  <p>Here is my HTML: </p>
  
  <pre><code>    &lt;section id="hero"&gt;
          Content here
      &lt;/section&gt;
  
      &lt;section class="showcase"&gt;
          Content here
      &lt;/section&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>body {
   padding: 0;
   margin: 0;
   border: 0;
   background: #f5f6f7;
   color: #fff;
   text-align: center;
  }
  
  section {
   width: 100%;
   position: relative;
  }
  
  #hero {
   background: black; 
  }
  
  .showcase {
       background: blue;
       height: 500px;
  }
  </code></pre>
  
  <p>I can't tell why this isn't working - i'm quite new to javascript / jQuery so maybe i'm missing something fairly obvious. </p>
  
  <p>Basically what happens is - when the page loads the div looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/RlzSW.png" alt="First state of page reload"></p>
  
  <p>(the div is only wrapping the 'content here' content - eg. has no height set)</p>
  
  <p>As soon as I grab the bottom of the browser window and resize it, the div fills the viewport - but I want the div to fill the view port straight away, and then allow me to scroll down to the next div.</p>
  
  <p>Here is a code pen with my code - however, the code seems to work on this code pen!? </p>
  
  <p><a href="http://codepen.io/maxwbailey/pen/xDGmy" rel="nofollow noreferrer">http://codepen.io/maxwbailey/pen/xDGmy</a></p>
  
  <p>Can someone offer a solution as to where I am going wrong? as my code doesnt work in Safari chrome or firefox, but it works in the Code Pen.</p>
  
  <p>Thanks</p>