I am facing an issue with a layout example that works fine except in IE. The problem arises when I try to toggle the size between 50px and 100px on the bottom div upon clicking a button.
Even though I attempted to create a fiddle, I was unsuccessful.
<style type="text/css">
.table
{
display: table;
width: 100%;
height: 100%;
}
.bottom
{
display: table-row;
height: 100px;
background-color: red;
}
.top
{
display: table-row;
height: 100%;
background-color: yellow;
position: relative;
}
.header
{
height: 100px;
background-color : gray;
}
.content
{
display: table-row;
height: 100%;
background-color: yellow;
position: relative;
}
.footer
{
display: table-row;
height: 100px;
background-color: blue;
}
</style>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
<div class="table">
<div class="top">
<div class="table">
<div class="header" >
header
</div>
<div class="content">
1.1
</div>
<div class="footer">
1.2
</div>
</div>
</div>
<div class="bottom">
<!-- Can change bottom height to 50px on click -->
<button id="changeSize"></button>
</div>
</div>
</div>