title: WebPage with header and footer and 100% content div
body: <p>I am looking to write a web page for IE 8 that has a logo and header div at the top, a content seciton in the middle, and a sticky footer at the bottom. The problem is, I cannot get the content section to take up 100% of what's left. Code below. Whenever I set the height as 100% for the content, there is a 100px over due to the header/logo divs. How can I fix this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;%@ Master Language="C#" inherits="DenApp.master"%&gt;
  &lt;html&gt; 
  &lt;head runat="server"&gt;
      &lt;title&gt;DenApp&lt;/title&gt;
      &lt;script type="text/javascript" src="javascript/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
      &lt;link rel="Stylesheet" href="./css/master.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="master_bodywrapper"&gt;
          &lt;div id="master_maindiv"&gt;
              &lt;div id="master_logodiv"&gt;
              &lt;/div&gt;
              &lt;div id="master_tabsdiv"&gt;
              &lt;/div&gt;
              &lt;div id="master_contentdiv"&gt;
                  &lt;asp:contentplaceholder ID="content" runat="server" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="master_footerdiv"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body
  {
      margin:0px;
      padding:0px;
      height:100%;
      width:100%;
  }
  #master_bodywrapper
  {
      margin:0px;
      padding:0px;
      height:100%;
      background-color:Black;
  }
  #master_maindiv
  {
      background-color:Orange;
      padding-bottom:20px;
      height:100%;
  }
  #master_logodiv
  {
      background-color:Blue;
      height:50px;
  }
  #master_tabsdiv
  {
      background-color:Green;
      height:50px;
  }
  #master_contentdiv
  {
      background-color:Yellow;
  }
  #master_footerdiv
  {
      background-color:Purple;
      height:20px;
      position:relative;
      margin-top:-20px;
      clear:both;
  }
  </code></pre>
  
  <p>Fiddle added at request: <a href="http://jsfiddle.net/zZUUW/5/" rel="nofollow">http://jsfiddle.net/zZUUW/5/</a></p>