title: Height is 100%?
body: <p>I will a style of asp.net webpage like:</p>
  
  <pre><code>body
      {
          font-family: Times New Roman, Serif;
          color: #000000;
          text-align: center;
          min-height:100%;
          height:auto;
      }
      #container
      {
          /*background-color: #00CCFF; */
          margin: auto;
          width: 100%;
      }
      #header
      {
          /* background-color: #FF00FF; */
          width: 100%;
          height: 95px;
          background-image:url('../Images/Back_logo.png');
          background-repeat:repeat-x;
          background-color:Transparent;
      }
      #menu
      {
          /*background-color: #FFFF00; */
          height:40px;
      }
      #left
      {
          /* background-color: #00FF00; */
          width: 20%;
          float: left;
      text-align:left;
          border:1px solid #C8E3F1;
          background-color:#EEFFFF;
          overflow:hidden;
      }
      #center
      {
          width: 79%;
          float: right;
          /* background-color: #FF0000; */
      }
      #footer
      {
          /*background-color: #008000; */
          clear: both;
          height:70px;
          margin-top:10px;
          background-image: url('../Images/footer.png');
          background-repeat:repeat-x;
          background-color:Transparent;
      }
  </code></pre>
  
  <p>I have a problem is the height of page <strong>not 100%</strong>. I used min-height or height is 100% in <strong>body</strong>, but don't work. The <strong>footer</strong> change by the long of content <strong>center</strong>. How to fix?
  The html is very simple:</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="layout.master.cs" Inherits="layout" %&gt;
  
  &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 runat="server"&gt;
      &lt;title&gt;Layout&lt;/title&gt;
      &lt;asp:ContentPlaceHolder id="head" runat="server"&gt;
      &lt;/asp:ContentPlaceHolder&gt;
      &lt;link href="App_Themes/theme1/custom.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div id="container"&gt;
          &lt;div id="header"&gt;HEADER&lt;/div&gt;
          &lt;div id="menu"&gt;MENU&lt;/div&gt;
          &lt;div id="left"&gt;LEFT&lt;/div&gt;
          &lt;div id="center"&gt;
              &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"&lt;/asp:ContentPlaceHolder&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;FOOTER&lt;/div&gt;&lt;/div&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;  
  </code></pre>
  
  <p>In other pages use this Master Page, the div have ID is <strong>center</strong> can stretch or shrink belong to the contain in it. So that the display of footer isn't exact.</p>