Css absolute position of child height in parent with display table not working in IE
Quick question regarding positioning an absolute div in parent display: table-cell in IE.
I created a jsfiddle of the layout I am trying to create and it works in chrome and firefox, but in IE it breaks the absolute height of the .list-container child (which is se to fill all space from top 118px down) when inside the parent with display: table-cell .
Are there any IE styling rules I am missing to help it render the absolute child? Is this 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>
+3
source to share
1 answer
I found that in IE the table-cell only accepts the height from the children. If you add a div.table wrapper that is styled 100% with a height around header.header and div.list-container, it will give the parent div.table-cell 100% of the parent table.
here is a jsfiddle showing the changes:
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;
vertical-align: top;
}
.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>
+2
source to share