title: How can I make this CSS layout work in IE9 / 10?
body: <p>I have the following CSS layout:
  <img src="https://i.stack.imgur.com/LnI13.png" alt="enter image description here"></p>
  
  <p>It works great in Firefox / Chrome and IE11. But it doesn't work in any IE lower than 11.</p>
  
  <p>Where it looks like this:</p>
  
  <p><img src="https://i.imgur.com/8cTBDGY.png" alt="enter image description here"></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="table"&gt; &lt;!-- display: table --&gt;
          &lt;div class="top"&gt;&lt;!-- display: table-row --&gt;
          content
          &lt;/div&gt;
          &lt;div class="content"&gt; &lt;!-- display: table-row --&gt;
            &lt;div class="tablewrap-wrap"&gt; &lt;!--
                 position: relative;
                 width: 100%;
                 height: 100% (this doesn't work in IE&lt;11)
                  --&gt;
              &lt;div class="tablewrap"&gt;&lt;!-- 
                absolute 100% 100% --&gt;
                &lt;table&gt;
                  &lt;tr&gt;
                    &lt;td&gt;content&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;div class="bottom"&gt; &lt;!-- display: table-row --&gt;
         content
         &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/nb538jbg/" rel="nofollow noreferrer">http://jsfiddle.net/nb538jbg/</a></p>
  
  <p>The layout works with <code>display:table</code>
  and 2 wrap divs in the middle row with <code>position: relative</code> and <code>position: absolute</code></p>
  
  <p><code>.tablewrap-wrap</code> has a relative position, And it doesn't work with 100% height in IE&lt;11 somehow.</p>
  
  <p>How can I make this work on IE9 / IE10</p>