title: How to resize a div to clients viewport height?
body: <p>Ok, so i want to have a series of divs which are the exact width and height of the user's browser window, regardless of the screen size. I can easily make the divs stretch horizontally with "width: 100%;" but i cant work out how to make the height stretch itself. I am guessing that i need to use some bit of javascript to judge the height, and then another piece to resize the seperate divs. Unfortunately I am a complete javascript n00b and after two hours of seemingly fruitless searching and coming up with about 100 "solutions" this was as far as id gotten (Im sure that at some point I have probably been closer to the answer):</p>
  
  <pre><code>var viewportHeight = "height:" + document.documentElement.clientHeight; 
  
  getElementById('section-1').setAttribute('style', viewportHeight);
  
  
  
  &lt;div class="section" id="section-1"&gt;&lt;/div&gt;
  
  &lt;div class="section" id="section-2"&gt;&lt;/div&gt;
  
  &lt;div class="section" id="section-3"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>edit:</strong>
  ah i should be more clear, im attempting to have all three divs  take up the entire screen, so you have to scroll down to see each one - almost like seperate slides. The idea is that each one takes up the entire screen so you cant see the next section until you scroll down, rather than having three divs which take up a third of the screen.</p>