Quick question regarding positioning an absolute div in a parent display: table-cell in IE.
I have created a jsfiddle of the layout that I am trying to create and it works in chrome and firefox but in IE it breaks the .list-container absolute height of the child (which is se to to fill all space from the top 118px down) when inside of a parent with display: table-cell .
Is there any IE styling rules that I am missing to help it render the absolute child? Is this something that is possible in IE?
html, body{
height:100%;
margin:0;
padding:0px;
}
.table{
display : table;
width : 100%;
height : 100%;
}
.row{
display : table-row;
width : 100%;
height : 100%;
}
.table-cell{
height:100%;
width:50%;
border:1px solid #000;
display : table-cell;
position: relative;
}
.header{
position:relative;
top:0px;
height:112px;
margin:0px;
border:3px solid blue;
background: rgba(0,0,230, .2);
}
.list-container{
position:absolute;
top:118px;
left:0px;
bottom:0px;
right:0px;
margin:0px;
overflow:auto;
overflow-x:hidden;
border:3px solid #CCC;
background: rgba(0,0,0,.1);
}
<body>
<div class="table">
<div class="row">
<div class="table-cell">
<header class="header"></header>
<div class="list-container">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="table-cell">
</div>
</div>
</div>
</body>
I found that in IE a table-cell only accepts the height from the child elements. If you add a wrapper div.table that has a styleof 100% with and height around the header.header and div.list-container it will give thew parent div.table-cell aheight of 100% of the parent table.
here is a jsfiddle showing the changes:
jsFiddle