css - HTML layout in IE10 involving percentage width and height -

an absolute positioned div in ie10 not filling parents height (works ok in latest chrome , firefox).

in code below, "percent-height" class issue lies. fills width ok, not height.

if set pixel height (in cell 3), how know percentage "height" issue, not width. need percentage height responsive.

codepen visuals: http://codepen.io/anon/pen/enexog

html:

<div class="table">     <div class="cell">        <img src="http://placehold.it/200x200" alt="" />     </div>     <div class="cell">         <div class="percent-height"></div>     </div>     <div class="cell">         <div class="px-height"></div>     </div>     <div class="cell">     </div> </div> 

css:

.table {     display: table;     width: 100%;     border-spacing: 5px; }  .cell {     display: table-cell;     width: 25%;     position: relative;     background-color: grey; }  .percent-height {     position: absolute;     width: 100%;     height: 100%;     top: 0;     left: 0;     background-color: green; }  .px-height {     position: absolute;     width: 100%;     height: 200px;     top: 0;     left: 0;     background-color: red; } 

for issue can use "display:flex" css distribute height dynamically.

.table{    display: -ms-flex;    display: -webkit-flex;    display: flex; } .cell {    -ms-flex: 1;    -webkit-flex: 1;    flex: 1; }