title: html/css content doesn't stretch
body: <p>In my page I want content (red color in the page) stretch to the footer(yellow color) ... I can't find any way to fix this past 3 days. Please help me..</p>
  
  <pre><code>index.html
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="header"&gt;HEADER&lt;/div&gt;
      &lt;div id="content"&gt;CONTENT&lt;/div&gt;
      &lt;div id="footer"&gt;FOOTER&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my style.css</p>
  
  <pre><code>html,
  body {
      margin:0;
      padding:0;
      height:100%;
      background-color: blue;
  }
  #wrapper {
      min-height:100%;
      position:relative;
  }
  #header {
      padding:10px;
      background:#5ee;
  }
  #content {
      padding:10px;
      padding-bottom:80px;
      background-color: red;
      width: 1000px;
      margin: 0 auto;
  }
  #footer {
      width:100%;
      height:80px;
      position:absolute;
      bottom:0;
      left:0;
      background:#ee5;
  }
  </code></pre>