title: CSS two nested DIVs with both 100% height don't work
body: <p>I have two nested <code>DIV</code>'s, the outer div (<code>div#wrapper</code>) has a <code>height</code> of <code>100%</code> which works fine, but there is a <code>div</code> inside <code>div#main</code> which should be <code>100%</code> but it is not. If I change <code>div#main</code> to <code>position:absolute</code> then it is <code>100%</code> but then the block is not in the wrapper anymore and gets out on bottom. Can you help me please...</p>
  
  <pre><code>html, body{
  background-image:url(images/bg.png);
  height:100%;
  margin:0px;
  padding:0px;
  }
  
  div#header{
  background:-moz-linear-gradient(top, #e5e5e5, #b5b5b5); /* Firefox */
  background:-webkit-linear-gradient(top, #e5e5e5, #b5b5b5); /* Safari, Chrome */
  background:-o-linear-gradient(top, #e5e5e5, #b5b5b5); /* Opera */
  background:-ms-linear-gradient(top, #e5e5e5, #b5b5b5); /* IE */
  background:linear-gradient(top, #e5e5e5, #b5b5b5); /* W3C Standard */
  border-bottom: 1px solid #000000;
  height:50px;
  position:fixed;
  width:100%;
  }
  
  div#logo{
  border: 1px solid #ff0000;
  
  background-image:url(images/logo.png);
  background-repeat:no-repeat;
  height:50px;
  margin:0 auto;
  position:relative;
  width:900px;
  }
  
  div#wrapper{
  border: 1px solid #00ff00;
  
  height:auto !important;
  height:100%;
  margin:0 auto;
  min-height:100%;
  position:static;
  width:900px;
  }
  
  div#main{
  border: 1px solid #00ffff;
  position:static;
  height:100%;
  height:auto !important;
  min-height:100%;
  margin-top:75px;
  }
  
  &lt;div id="header"&gt;
  &lt;div id="logo"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;div id="main"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>