title: set height of inner div of table-cell to 100% of table-cell height in IE9/10
body: <p>I think this is an IE9/10 specific issue.  I'm trying to create a flexible row layout as follows:</p>
  
  <pre><code>|----------------------------------|
  |    FIXED HEIGHT                  |
  |----------------------------------|
  |    FIXED HEIGHT, SOMETIMES HIDDEN|
  |----------------------------------|
  |                                  |
  |    FLEXIBLE HEIGHT               |
  |                                  |
  |----------------------------------|
  |    FIXED HEIGHT                  |
  |----------------------------------|
  </code></pre>
  
  <p>I also want the outer container for this to have a flexible height and width which fits the browser view port.</p>
  
  <p>Naively, possibly, I thought that since I'm only supporting Chrome, Firefox, Safari, and IE9/10, then <code>display: table</code>, <code>display: table-row</code>, <code>display: table-cell</code> might be a good way to go, so I came up with:</p>
  
  <p>jsFiddle: <a href="http://jsfiddle.net/Nugps/2/" rel="nofollow">http://jsfiddle.net/Nugps/2/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="stage"&gt;
      &lt;div class="table"&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="content1"&gt;one&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="content1"&gt;two&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row flexible"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="content2"&gt;three&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="cell"&gt;
                  &lt;div class="content1"&gt;four&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  
  html, body {
      height: 100%;
  }
  
  .stage {
      position: absolute;
      top: 15px;
      right: 15px;
      bottom: 15px;
      left: 15px;
  }
  
  .table {
      display: table;
      height: 100%;
      width: 100%;
      background: lightblue;
  }
  
  .row {
      display: table-row;
  }
  
  .cell {
      display: table-cell;
      border: 3px solid red;
      height: 50px;
  }
  
  .row.flexible {
      height: 100%;
  }
  
  .row.flexible .cell {
      height: 100%;
  }
  
  .content2 {
      background: lightgreen;
      height: 100%; /* setting this in IE causes the content to be 100% of the table rather than the table cell height */
  }
  </code></pre>
  
  <p>If you open this jsFiddle in Chrome, everything is as expected.  However in IE10, and I suspect IE9 also, the heights are messed up (the .content2 height is 100% of the table rather than the cell).</p>
  
  <p>Is there a good workaround for this other than setting the height of the content manually using javascript?  Or is there a better CSS layout that I could use?  I can't use the newer flexbox because of IE9.</p>