title: CSS Sticky Footer when content does not take up entire page
body: <p>I have two pages that differ only by the content contained in the <strong>content-box</strong> div tag.  You can see them here:</p>
  
  <p><a href="http://embeddedanalytics.com/eatall.htm" rel="nofollow">Tall Version</a></p>
  
  <p><a href="http://embeddedanalytics.com/eashort.htm" rel="nofollow">Short Version</a></p>
  
  <p>I have included the html/css code for the <strong>short</strong> version below.  I would like to have the <strong>short</strong> version display so that if the amount of content does not fill up the entire page, the footer will still stick to the bottom AND the entire area between the header and the footer in the middle of the screen is the white corresponding to the <strong>content-box</strong> div.</p>
  
  <p>What do I need to change to accomplish this?\</p>
  
  <p><strong>Update 1</strong> I made a new page doing what @smallworld suggested.  It can be seen <a href="http://embeddedanalytics.com/eashort1.html" rel="nofollow">here</a>.  This has a sticky footer, but I would like the outside "container" box to extend the height of the page.</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"&gt;
      &lt;html lang="en"&gt;
          &lt;head&gt;
              &lt;meta http-equiv="Content-Type" content=
              "text/html; charset=us-ascii"&gt;
              &lt;style type="text/css"&gt;
  
  
                  #main {
                      width: 100%;
                      min-height: 100%;
                      height: 100%;
                  }
  
                  body {
                      width: 100%;
                  }
  
  
                  #header,#content { position:relative; right:0;left:0}
  
                  #header{
                      height:75px; top:0;
                      background: #4396CA;
                  }
                  #footer{
                      width: 100%;
                      position: relative;
                      height:50px;
                      bottom: 0;
                      left: 0;
                      background: #4396CA;
                  }
                  #content{
                      top:00px;
                      background: #F0F8FF;
                      min-height: 100%;
                      height: 100%;
                  }
  
                  #content-box {
                      width: 950px;
                      margin: 0 auto;
                      background-color: #FFFFFF;
                      text-align: left;
                      border-right: 1px solid #B0B0B0;
                      border-left: 1px solid #B0B0B0;
                      padding-bottom: 20px;
                      padding-top: 20px;
                      min-height: 100%;
                      height: 100%;
                  }
  
              &lt;/style&gt;
              &lt;title&gt;EmbeddedAnalytics - Test Page&lt;/title&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div id="main"&gt;
                  &lt;div id="header"&gt;this is header&lt;/div&gt;
                  &lt;div id="content"&gt;
                      &lt;div id="content-box"&gt;
                          &lt;b&gt;Content does not take up all of box.  But still want footer to "stick" to bottom&lt;/b&gt;&lt;br&gt;
                          line1&lt;br&gt;
                          line2&lt;br&gt;
                          line3&lt;br&gt;
                        Last Line&lt;br&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="footer"&gt;footer&lt;/div&gt;
              &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>