title: html 3 row layout using div's
body: <p>I have 3 rows header,footer and content but my content div is too large and makes the window to scroll. how do I put the content fixed between header and footer and how do I change the height so that is does not have to scroll the window </p>
  
  <p>my index.php</p>
  
  <pre><code>&lt;body&gt; 
  &lt;div id="container"&gt;
      &lt;div id="header"&gt;
  
      &lt;/div&gt;
      &lt;div id="content"&gt;
  
      &lt;/div&gt;
      &lt;div id="footer"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>my css</p>
  
  <pre><code> body {
  margin:0;
  padding:0;
  }
  div#header{
  width:100%;
  height:65px;
  position:relative;
  top:0;
  background-color:#F00;
   } 
  
  div#footer{
  width:100%;
  height:65px;
  position:relative;
  bottom:0;
  background-color:#06F;
  }
  div#content{
  background-color:#9F0;
  width:100%;
  height:100%;
      }
  </code></pre>
  
  <p>this is how it looks at the top: <a href="http://i45.tinypic.com/2u6k955.png" rel="nofollow">link</a></p>
  
  <p>this is how it loks after scrolling at the bottom :<a href="http://i50.tinypic.com/jqomzp.png" rel="nofollow">link 2</a></p>
  
  <p>I want the header(red), footer(blue), and content(green) to come in 100% height so that I don't have to scroll</p>