title: Why does 100% height work inside a display:table-row on Chrome & FF but not in IE9?
body: <p>I have a little dilemma. I could work around this issue, but it would be a pain to do so and still limit things in sense of how a site layout could work. Basically I've been using the following method to give myself a sticky footer that is actually height variable:</p>
  
  <p><a href="http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/" rel="nofollow">http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/</a></p>
  
  <p><strong>Example:</strong></p>
  
  <p>The CSS:</p>
  
  <pre><code>html, body {height:100%; width:100%; margin:0;}
  .wrapper {display:table; width:100%;}
  html&gt;body .wrapper {height:100%;}
  .wrapperRow {display:table-row;}
  .wrapperRow.wrapperExpand {height:100%;}
  .this-wont-expand-to-100-percent-in-IE {height:100%;}
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="wrapper"&gt;
  
  &lt;div class="wrapperRow"&gt;This is the header&lt;/div&gt;
  
  &lt;div class="wrapperRow wrapperExpand"&gt;
  &lt;div class="this-wont-expand-to-100-percent-in-IE"&gt;
  This is the content
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapperRow"&gt;This is the footer&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CodePen: <a href="http://cdpn.io/ILisk" rel="nofollow">http://cdpn.io/ILisk</a></strong></p>
  
  <p><em><strong>THE PROBLEM:</em></strong></p>
  
  <p>Well, the problem is this works just fine in Chrome and Firefox... however it does <strong>NOT</strong> work in <strong>IE 9 or lower</strong> (not sure if it does in IE 10). The 'wrapperRow wrapperExpand' div does have it's height set to an absolute height of 100%, which is the parent of the 'this-wont-expand-to-100-percent-in-IE' and that is also set to 100%. I don't understand why this doesn't work. Does anyone have a solution or work around to make that inner child div (the 'this-wont-expand-to-100-percent-in-IE' one) match the height of it's parent? (the 'wrapperRow wrapperExpand' one)</p>
  
  <p>I'm starting to think that it's just not possible in IE... at least not without using java-script perhaps... unfortunately I'm really not that familiar with that. Any ideas?</p>