title: How to fix vertical overflow between IE (9) and Chrome
body: <p>Full fiddle:
  <a href="http://jsfiddle.net/kenyu73/TqLH4/3/" rel="nofollow noreferrer">http://jsfiddle.net/kenyu73/TqLH4/3/</a></p>
  
  <p>I've been through alot of Overflow postings and there seems just as many solutions as version of browsers and browser versions! </p>
  
  <p>I've tried using Height:100%; Overflow: hidden; on all parent elements too. (, , etc)</p>
  
  <p>If I set my (row4 > td) = 75% or so, the overflow is obviously gone.</p>
  
  <p>Ideas, suggestions?</p>
  
  <p>Thanks!</p>
  
  <pre><code>#row0,#row1,#row2,#row3{
      height: 1%;
  }
  #row4{
  }
  #row4 &gt; td{
      height: 100%; /*** UGH, todo...***/
      overflow: hidden;
  }
  
  
  #divContainer{
      height: 100%; /*** UGH, todo...***/
      border: 1px solid #C8C8C8;
      margin: 2px;
      overflow: auto;
  }
  </code></pre>
  
  <p>.    </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  </code></pre>
  
  <p>.</p>
  
  <pre><code>&lt;tr id="row4"&gt;
      &lt;td&gt;
          &lt;div id="divContainer"&gt;
              &lt;div class="results" id="div_search_results"&gt;&lt;/div&gt;
              &lt;div class="results" id="div_content_results"&gt;&lt;/div&gt;
              &lt;div class="results" id="div_top_results"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div id="divContainer"&gt;
              &lt;div id="div_contents"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>IE9 - Blah --> getting "browser" scrollbars since body goes off page!</p>
  
  <p><img src="https://i.stack.imgur.com/Smo4W.jpg" alt="IE9 Overflow: hidden not working"></p>
  
  <p>Chrome - Perfect!</p>
  
  <p><img src="https://i.stack.imgur.com/cpz9J.jpg" alt="Chrome Overflow OK"></p>