title: Content container to fit screensize?
body: <p>If got a very basic layout, with a header, content container and a footer.
  What i need done, is to make my content container size up, so that the whole layout will fit on the screen. (unless the text in the content container extends this of course).</p>
  
  <p>I've tried assigning a height 100% value to my body, and from there assigning my content containers height to 100% aswell, but that results in making my content container size up to the height of the full screen.</p>
  
  <p>Before that i had the height on the content container set to auto, which of course resulted in the page not being long enough, if a visitor with a bigger screen size than the layout, viewed the page.</p>
  
  <p>Here is a part of my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="background"&gt;&lt;/div&gt;
          &lt;div class="page"&gt;
              &lt;div class="header"&gt;
              &lt;/div&gt;
  
              &lt;div class="content"&gt;
              &lt;/div&gt;
  
              &lt;div class="footer"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
      height:100%; 
      margin:0; 
      padding:0;
  }
  .page {
      position:relative; 
      height:100%;
      z-index:1; 
  }
  .content {
      position:relative;
      width:850px;
      height: 100%;
      margin: 0 auto;
      background: url(images/content.png) 0 0 repeat-y;
  }
  </code></pre>