title: Nested table-row not not filling 100% in IE
body: <p>I'm working with quite a complex layout using display: table-row and in IE I can't get the row to stretch when I'm using a nested table.</p>
  
  <p>Check out this in <a href="http://jsfiddle.net/DVxpZ/7/" rel="nofollow">http://jsfiddle.net/DVxpZ/7/</a> in Chrome/FF vs IE(10)</p>
  
  <p>I want the blue row to stretch to fill the available space and the purple row to be at the bottom.</p>
  
  <p>Any advice gratefully received. I tried using position: fixed; for this kind of layout but then I can't get the rows to resize as the screen size gets smaller.</p>
  
  <pre><code>&lt;div id="full-height" class="table"&gt;
      &lt;header class="table-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/header&gt;
      &lt;div id="main"class="table-row"&gt;
          &lt;div class="table"&gt;
              &lt;div id="row1" class="table-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div id="row2" class="table-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div id="row3" class="table-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div id="row4" class="table-row stretch-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/div&gt; 
              &lt;div id="row5" class="table-row"&gt;&lt;div class="button"&gt;&lt;/div&gt;&lt;/div&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css</p>
  
  <pre><code>body, html{
      height: 100%;
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
  }
  .table-cell{
      display: table-cell;
  }
  .full-cell{
      height: 100%;
      width: 100%;
  }
  #main{
      height: 100%;
  }
  
  .button{
      display: block;
      height: 30px;
      width: 100px;
      background-color: green;
      margin: 3px;
  }
  
  #row1{
      background-color: pink;
  }
  
  #row2{
      background-color: orange;
  }
  
  #row3{
      background-color: red;
  }
  
  #row4{
      background-color: blue;
  }
  
  
  #row5{
      background-color: purple;
  }
  
  
  #full-height{ 
      height:100%;
      width: 100%;
  }
  
  .table{
      display: table;
      height: 100%;
      width: 100%;
      background: yellow;
  }
  
  .table-row {
      display: table-row;
  }
  
  .stretch-row{
      height: 100%;
  }
  </code></pre>