title: Set div with certain class to be same height as window innerHeight
body: <p>So, this seems easy enough to do in my head, but I can't get it to work and Google isn't helping me, can you see what I'm doing wrong?</p>
  
  <p>I have 5 divs, I want them to be the same height as the browser window. Even on resize.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript"&gt;
  function setDivHeight(){
      var windowHeight = window.innerHeight;
      if(windowHeight &gt; 400){
          document.getElementsByClassName("minHeight").style.backgroundColor = 'black';
      }
      else if(windowHeight &lt; 400){
          document.getElementsByClassName("minHeight").style.backgroundColor = 'red';
      }
  }
  
  window.addEventListener("resize",setDivHeight,false);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;style type="text/css"&gt;
  
  body{margin:0; padding:0;}
  
  .minHeight{
      height:20px;
  }
  
  .a{
      background: #09C;
  }
  .b{
      background: #09b;
  }
  .c{
      background: #09d;
  }
  .d{
      background: #09e;
  }
  .e{
      background: #09f;
  }
  
  
  
  &lt;/style&gt;
  &lt;body onload="setDivHeight()"&gt;
  &lt;div class="a minHeight"&gt;&lt;/div&gt;
  &lt;div class="b minHeight"&gt;&lt;/div&gt;
  &lt;div class="c minHeight"&gt;&lt;/div&gt;
  &lt;div class="d minHeight"&gt;&lt;/div&gt;
  &lt;div class="e minHeight"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>