title: DIV overflow hidden and height not working in DOCTYPE HTML standards mode in IE9
body: <p>I have a <code>&lt;div&gt;</code> with overflow:hidden, and <code>height:100%</code> which displays the div contents on the screen and fits to the height of the window.</p>
  
  <p>This works with Chrome, and Safari.</p>
  
  <p>IE9, doesn't respect my div <code>overflow:hidden</code> and <code>height:100%</code> so it just expands the div to display the content.</p>
  
  <p>On my page I have the following doctype</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  </code></pre>
  
  <p>This should indicate the compliance with the latest standards.</p>
  
  <p>If I remove the Doctype completely then everything works fine in all the browsers, except the fonts are too big because there isn't a doctype specified.</p>
  
  <p>Any reason this might be happening?
  html and body tags are specified as height:100% in css stylesheet</p>
  
  <pre><code>&lt;div style="overflow:hidden;height:100%"&gt;
  content too tall to fit height of the screen, so a scroll bar is added.  In IE9 it doesn't work because it just extends the height of the DIV
  &lt;/div&gt;
  </code></pre>
  
  <p>Edit: 
  I have included full HTML that can completely replicate the problem in IE9</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
       &lt;style&gt;
        * { /* Resetting the defaults */
            margin: 0;
            padding: 0;
        }
  
        html, body { /* Assigning Height To Containers First */
            height: 100%;
        }
  
        table
        {
          height:100%;
          width:100%;
          border-collapse: collapse  
        }
  
        .headerRow
        {
          height:50px;
        }
  
        .sidePanelTd
        {
  
  
        }
  
        .sidePanelDiv
        {
          overflow:auto;
          height:100%;
        }
  
        .row2
        {
  
        }
  
       &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="background-color:White;overflow:auto"&gt;
      &lt;table border=0 cellpadding=0 cellspacing=1 id="mainTable"&gt;
      &lt;tr class="headerRow"&gt;
          &lt;td valign=top colspan=2&gt;Header
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="row2"&gt;
          &lt;td&gt;
          td 1
          &lt;/td&gt;
  
          &lt;td class="sidePanelTd"&gt;
             &lt;div class="sidePanelDiv"&gt;
                td 2 content &lt;br&gt;too &lt;br&gt;tall &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;to fit height of the screen, 
                so a scroll bar is added.  In IE9 it doesn't work because it just extends 
                the height of the DIV
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>