title: Div scaling to content when height is set to 100%
body: <p>I have three nested divs, with the inner one having fixed height, the middle one intended to fill up the outer one, and the outer one accomodating a stuck-to-the-bottom footer. But the middle div seems to only be as high as the inner one, which I don't want.</p>
  
  <p>I reduced the problem to the following, which I believe is a minimal example. I don't want to change the height properties of the outer or inner divs, since that will interfere with the rest of the layout. Is there a way to do what I want by just changing the middle div's properties?</p>
  
  <p>Here's the html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt;
      &lt;/head&gt; 
  
      &lt;body&gt;
          &lt;div id="outer"&gt;
              &lt;div id="middle"&gt;
                  &lt;div id="inner"&gt;&lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>html{height:100%;}
  body{height:100%;}
  #outer{height: auto; min-height: 100%;}
  #middle{height: 100%;}
  #inner{height:500px;}
  </code></pre>
  
  <p>You can check that the <code>#middle</code> div gets height 500 whereas I want it to fill the <code>#outer</code> div.</p>
  
  <p>I'm a complete newbie to CSS, and almost all of the code is copied from different tutorials and/or trial and error. So please excuse me if I'm doing something blatantly wrong/stupid.</p>
  
  <p><strong>Edit:</strong> I don't understand why, but it seems removing the doctype declaration makes the issue go away. Hence I've changed the code samples to include the declaration.</p>