“height=100%” doesn't work in IE9

Question

I have HTML defined as this.

<div class="a">
     <div class="b" >
         something
     </div>
     <div class="c" >
         <div class="d">
         </div>
    </div>
</div>

And the CSS style is defined as:

html,body
{
    height:100%;
    width:100%;
}
.a
{
    display:table;
    height: 100%;
    width: 99%;
    background: green;
    padding-top: 10px;
    float: left;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.b
{
    background: yellow;
    display:table-row;
    padding-bottom: 10pt;
    margin-left: 5pt;
    float: left;

}
.c
{
    background: pink;
    display:table-row;
    height:100%;
    width: 100%;
}

.d
{
    display: block;
    width: 100%;
    height: 100%;
    float: left;
}

In Firefox, Safari, Chrome, the div with class "d" has the same height with its parent div element. But in IE9, the height of div with class "d" is equal to 0. Does anybody know the reason.

Here is the link of above test code http://jsfiddle.net/ZDY4P/19/

Answer 1

Remove the float property in .d . And use a table-cell for .d within the display:table-row that .c stands for. Works in IE9:

http://jsfiddle.net/ZDY4P/45/

.d
{
    background: orange; /* added a marker color */
    display: table-cell;
    width: 100%; /* or 50% or auto for multiple columns... */
    height: 100%;
}

If you are in need to have multiple columns of 100% height inside .c , add multiple D's as shown in the jsfiddle.

To IE9's honour: I don't have a list, which kind of display nestings are allowed, but nesting display:block; float: left display:block; float: left inside a display:table-row is maybe somewhat invalid, speaking old-HTML:

<table>
  <tr>
    <div> <!-- expected: a <td> -->
       ..