title: Keep content below a fixed header using Jquery
body: <p>Here is a <a href="http://jsfiddle.net/R4d57/7/" rel="nofollow">JS fiddle</a> isolating my issue</p>
  
  <p>I have a fixed header with floating content that has defined widths and heights, which increase the size of the header as the window gets smaller.</p>
  
  <p>What I need is for the div with the class "page-bump" to always be the same height as the header so that the content below #header will line up flush with the bottom of #header.</p>
  
  <p>Right now I have it so whenever the page is refreshed .page-bump gets a height assigned to it which is equal to the header, great!  However, it doesn't update as the window gets resized.
  code below:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div class="thing1"&gt;&lt;/div&gt;
  &lt;div class="thing2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="page-bump"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {
  background-color:#0000FF;
  width:100%;
  position:fixed;
  }
  .thing1 {
  float:left;
  background-color:#a7a7a7;
  width:300px;
  height:50px;
  }
  .thing2 {
  float:left;
  background-color:#f2f2f2;
  width:300px;
  height:50px;
  }
  </code></pre>
  
  <p>Javascript/Jquery</p>
  
  <pre><code>var pageBump = function () {
  var headerHeight = $('#header').height();
  $('.page-bump').css('height',headerHeight);
  };
  $(window).resize(pageBump());
  </code></pre>
  
  <p>Any suggestions?  Thanks in advance :)</p>