title: Setting margin-top to the height of the page with JavaScript
body: <p>I am trying to set the margin-top of a div to the height of the window minus 220px using JavaScript. I want this value to change whenever the window changes sizes.</p>
  
  <p>Here is what I currently have:</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body onresize="heroHeight()" onload="heroHeight()"&gt;
     &lt;div class="heroImage"&gt;&lt;/div&gt;
     &lt;div class="content"&gt;
        &lt;!-- page content --&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.content {
     margin-top: 0;
     width: 100%;
  }
  </code></pre>
  
  <p>And finally my JavaScript:</p>
  
  <pre class="lang-js prettyprint-override"><code>function heroHeight() {
     var heroCurHeight = document.getElementsByClassName("content")[0];
     heroCurHeight.style.marginTop = (window.outerHeight - 220);
  }
  </code></pre>
  
  <p>Any idea what I am doing wrong?</p>
  
  <p>Thanks!</p>