It appears that in IE 11, my absolutely positioned element is not displaying within another element with a height:100%. Strangely, it only works if I assign a fixed height to the element (even though its parent has a fixed height).
Here is the HTML code:
<div class="parent-table">
<div class="parent-cell">
<div class="child">
</div>
</div>
</div>
And here is the CSS code:
html,
body {
height: 100%
}
.parent-table {
display: table;
table-layout: fixed;
position: relative;
height: 400px;
width: 100%;
}
.parent-cell {
height: 300px;
background: blue;
position: relative;
width: 100%;
display: table-cell;
}
.child {
position: absolute;
top: 0;
bottom: 0;
height: 100%;
background: red;
width: 100%
}
You can view a live example of the issue on this JSFiddle link.
- In Edge, the red box displays as expected.
- However, in IE 11, only the blue box is visible and the absolutely positioned element is missing.