title: Static header and footer with full length menu navigation
body: <p>I have tried literally everything I can think of. I have tried dozens of coding samples from the stack and tutorial sites. I cannot get this to work no matter what I do, and I'm absolutely at my wits end with trying to figure it out. Me and CSS don't get along.</p>
  
  <p>Here is what I'm trying to do:</p>
  
  <ul>
  <li>Static Header (always on the screen.)</li>
  <li>Footer that always stays at the bottom of the page. (Scrolls with content, but if there isn't enough content will appear at bottom of the screen.</li>
  <li>Left menu with background that goes all the way down to the top of the footer.</li>
  </ul>
  
  <p>I'm having trouble getting the background to go all the way down. It is a normal problem of being unable to have 100% parents, relatives and absolutes. This code I have now works fine with the exception of the background. I'm honestly considering just making the background a image and have it repeat. Here is the code:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
  
      html, body {
          margin: 0;
          padding: 0;
          height: 100%;
      }
  
      #main_wrapper {
          min-height: 100%;
          position: relative;
      }
  
      #header {
          width: 100%;
          background:#0F0;
          height:42px;
          position:fixed;
          left: 0;
          top: 0;
      }
  
      #content {
          margin-left: 200px;
          background:#F00; 
      }
  
      #footer {
          width:100%;
          height:32px;
          position:absolute;
          bottom:0;
          left:0;
          background:#00F;
      }
  
      #content_wrapper {
          padding-bottom: 32px;
          padding-top: 42px;  
          overflow: auto;
      }
  
      #left_menu {
          width:200px;
          background: #FF0;
          float:left;
      }
  
      &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div id="main_wrapper"&gt;
  
          &lt;div id="header"&gt;&lt;/div&gt;
  
          &lt;div id="content_wrapper"&gt;
  
              &lt;div id="left_menu"&gt;MENU&lt;/div&gt;
  
              &lt;div id="content"&gt;CONENT&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/x5mu7/" rel="nofollow">JSFiddle Source</a></p>
  
  <p>As you can see in the Fiddle code, what I'm going for is to have the yellow background take up the whole height. And any content that gets added will cause the whole page to scroll, footer to move to bottom and header remain static. All of that works right now except for the yellow background color taking up the whole height.</p>