Set div with certain class to be same height as window innerHeight
<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>
