title: DIV as big as browser window with no javascript
body: <p>I'd like to create a DIV as big as the browser window and then show the website using vertical scrolling. The effect I am looking for is similar to the one in <a href="http://themeforest.net/item/x-the-ultimate-wordpress-theme/full_screen_preview/5871901" rel="nofollow">THIS PAGE</a> (note the big banner that is always as big as the browser window, and the content at the bottom):</p>
  
  <p>With this HTML in mind:</p>
  
  <pre><code>&lt;div class="banner"&gt;
     This banner is always big like the browser window
  &lt;/div&gt;
  
  &lt;div class="content"&gt;
     Content of the website
  &lt;/div&gt;
  </code></pre>
  
  <p>This is one way to do it:</p>
  
  <pre><code>.banner {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: red;
  }
  
  .content {
  width: 100%;
  position: relative;
  background-color: green;
  }
  </code></pre>
  
  <p>Problem is, if I use absolute position for this DIV the content of my website start from the top of the page and is hidden by the banner.</p>
  
  <p>Is there any way to implement this without using javascript? </p>
  
  <p>Thanks in advance</p>