My goal is to have the height of the children div .cell fill up 100% of the parent's height, but it doesn't seem to be working.
This is the HTML code:
<div class="header">
header
</div>
<div class="wrapper">
<div class="padding">
<div class="table bg">
<div class="cell">
hello world
</div>
<div class="cell">
dummy text
</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
Here is the CSS code:
html,body{height:100%;}
body{margin:0;padding:0;}
.footer,.header{background:black;height:30px;color:white;}
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
.padding{padding:20px;}
.table{display:table;width:100%;}
.cell{display:table-cell;}
.bg{background:#ccc;}
I suspect that the issue lies with this part of the CSS:
.wrapper{min-height:calc(100% - 60px);height:auto !important;}
When I change .wrapper to this:
.wrapper{height:calc(100% - 60px);}
It seems to work as intended.